小程序 --- 样式和组件

1. 组件 ( HTML 标签)

1. view

最外层会被page标签包裹

<!-- view组件 类似于 H5 的 div 标签 -->
<view class="box">
小明
</view>

2. swiper 和 swiper-iitem

轮播图组件

**swiper : ** 滑块视图容器,其中只能放置 swiper-item 组件

**swiper-itme: ** 只可防止在 swiper 组件中,宽高自动设置为100%,代表swiper中的每一项

pages/index/index.wxml

<!-- 轮播图区域 -->
<view class="swiper">
    <!-- autoplay: 自动播放; -->
    <!-- circular: 循环播放 -->
    <!-- interval: 每次切换轮播图的时长,单位为ms -->
    <!-- indicator-dots: 展示小圆点 -->
    <!-- indicator-color: 小圆点的颜色 -->
    <!-- indicator-active-color: 小圆点被选中时的颜色 -->
    <swiper 
        autoplay 
        circular
        indicator-dots 
        interval="2000" 
        indicator-color="#fff"
        indicator-active-color="#f3514f"
    >
      <swiper-item>
      	<image src="/assets/tabbars/index.png" mode="aspectFit" show-menu-by-longpress/>
      </swiper-item>
      <swiper-item>
      	<image src="/assets/tabbars/cate.png" mode="aspectFit"/>
      </swiper-item>
      <swiper-item>
      	<image src="/assets/tabbars/cart.png" mode="aspectFit"/>
      </swiper-item>
    </swiper>
</view>

pages/index/index.scss

page{
  height: 100vh;
  background-color: #efefef !important;
}

// 轮播图区域样式
.swiper{
  swiper {
    height: 360rpx;
    background-color: skyblue;
    swiper-item{
      // image 充满整个父容器
      image{
        width: 100%;
        height: 100%;
      }

      // & 在 sass 中表示的是父选择器,会被解析成 swiper-item:first-child
      &:first-child{
        background-color: lightcoral;
      }
      &:last-child{
        background-color: lightgreen;
      }
    }
  }
}

3. image

默认宽度: 320px;默认高度: 240px,image组件不给src属性设置图片地址,也会占据宽高

<image src="/assets/tabbars/index.png" mode="aspectFit" show-menu-by-longpress/>

**常用属性: **

src: 图片资源地址
mode: 图片裁剪、缩放模式
show-menu-by-longpress: 长按图片显示菜单,会有发送给朋友、收藏、保存图片、识别二维码等功能
lazy-load: 图片懒加载,在滑动到一定距离(上下三屏),以后展示图片

4. text

除了文本节点外,其他节点都无法长按选中,text组件内只能嵌套text组件

pages/index/index.wxml

<!-- 公司信息 -->
<view class="info">
  <text>同城配送</text>
  <text>行业龙头</text>
  <text>半小时送达</text>
  <text space="nbsp">100% 好评</text>
</view>

pages/index/index.scss

// 公司信息样式
.info{
  display: flex;   // 推荐使用flex布局
  justify-content: space-between;
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}

**常用属性: **

user-select: 文本是否可选,长按以后选中文本
space: 显示文本中的连续空格
1. ensp: 以中文字符一半大小显示空格
2. emsp: 以中文字符大小显示空格
3. nbsp: 以英文字符大小显示空格

5. navigator

pages/index/index.wxml

<navigator url="/pages/list/list?id=10&name=hua" open-type="navigate">
	<image src="/assets/tabbars/index-active.png" mode=""/>
    <text>鲜花玫瑰</text>
</navigator>
<navigator url="/pages/cate/cate" open-type="reLaunch">到商品分类</navigator>

pages/list/list.wxml

<navigator open-type="navigateBack">返回上一级</navigator>

**常用属性: **

url: 当前小程序内的跳转链接
open-type: 跳转方式
1. navigate(默认跳转方式): 保留当前页面,跳转到应用内的某个页面。但不能跳转到 tabBar 页面,左上角会出现后退按钮,返回上一级页面
2. redirect: 关闭当前页面,跳转到应用内的某个页面。但不能跳转到 tabBar 页面,左上角会出现主页按钮,返回主页
3. switchTab: 只能跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
4. reLaunch: 关闭所有页面,打开到应用内的某个页面
5. navigateBack: 关闭当前页面, 返回上一页面或多级页面,只能配合 navigate 使用
  1. delta: 返回的层级,默认时1,如果想返回几级就写几

**携带参数: **

路径后可以携带参数: 参数与路径之间使用 ? 分隔,不同的参数之间使用 & 链接,在 onLoad(options) 生命周期函数中获取传递的参数
open-type="switchTab"时,不支持传参

6. scroll-view

可滚动视图区域, 适用于需要滚动展示内容的场景, 用于在小程序中实现类似于网页中的滚动条效果,用户可以通过手指滑动或者点击滑动条来滚懂内容

横向滚动

html

<!-- 推荐商品 -->
<view class="good-hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>
      <view class="good-item">
        <image src="/assets/tabbars/cate-active.png" mode=""/>
        <text>购物车</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="/assets/tabbars/cate-active.png" mode=""/>
        <text>购物车</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="/assets/tabbars/cate-active.png" mode=""/>
        <text>购物车</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="/assets/tabbars/cate-active.png" mode=""/>
        <text>购物车</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="/assets/tabbars/cate-active.png" mode=""/>
        <text>购物车</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="/assets/tabbars/cate-active.png" mode=""/>
        <text>购物车</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="/assets/tabbars/cate-active.png" mode=""/>
        <text>购物车</text>
      </view>
    </view>
  </scroll-view>
</view>

css

.good-hot{
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  .good-hot-wrapper{
    width: 100%;
    white-space: nowrap;  // 不允许自动换行,才能实现横向滚动
    view{
      display: inline-block;
      width: 320rpx;
      height: 420rpx;
      margin-right: 16rpx;
      &:last-child{
        margin-right: 0;
      }
      .good-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text{
          &:nth-of-type(1){  // 第一个 text 文字加粗
            font-weight: bold;
          }
        }
      }
      image{
        width: 100%;
        height: 320rpx;
        background-color: lightgreen;
      }
    }
  }
}

竖向滚动

html

<scroll-view scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
</scroll-view>

css

scroll-view{
  height: 400rpx;
  background-color: skyblue;
  view{
    height: 300rpx;
  }
}

**常用属性: **

scroll-x: 允许横向滚动
scroll-y: 允许纵向滚动

7. 字体图标

1. 点击css文件链接

2. 得到如下 css 源码

3. 在微信小程序根目录下创建 iconfont/iconfont.wxss 文件,如果使用了sass,则后缀名改为scss

4. 将代码粘贴至 iconfont.scss 文件中

5. 在app.wxss 中导入 iconfont.scss

// 必须以分号结尾
@import "./iconfont/iconfont.scss";

6. 使用字体图标

<text>
    <text class="iconfont icon-dayu"></text>
    <text>同城配送</text>
</text>

设置样式

.info{
  .iconfont{
    font-size: 24rpx;
  }
}

7. 错误处理

打开阿里巴巴矢量图标库官网,点击项目设置 => 勾选base64 ,重新生成代码,粘贴到 iconfont.scss 文件中

8. 表单组件

1. button

**常用属性: **

type
primary: 绿色按钮
warn: 红色按钮
size
default: 大按钮
mini: 小按钮

2. input

小程序中的 input 输入框,默认没有边框和大小,需要自己设置

2. 样式

1. 尺寸单位( rpx )

随着智能手机的发展,手机设备的宽度也逐渐多元化,这就需要开发者在开发的时候,需要适配不同屏幕宽度的手机,为了解决屏幕适配的问题,微信小程序推出了 rpx 单位,它可以根据不同设备的屏幕宽度进行自适应缩放,小程序规定任何型号的手机,屏幕宽度都为 750rpx

需求: 绘制一个盒子,让盒子的宽度占屏幕的一半

cart/cart.wxml

<view class="box">
小明
</view>

cart/cart.scss

.box{
  width: 375rpx;   // rpx 能够自适应,不管手机是什么型号,始终占据着屏幕宽度的一半
  height: 600rpx;
  background-color: lightgreen;
}

**开发建议: **

开发微信小程序时,设计师可以用 Iphone6 作为视觉稿的标准,因为 Iphone6 的设计稿一般是750px
如果用 Iphone6 作为视觉稿的标准量取多少px, 直接写多少rpx, 开发起来更方便,也能自适应屏幕宽度
1. 设计稿宽度是 750px,而 Iphone6的手机设备宽度是375px,设计稿想要完整的展示到手机中,就需要缩小一倍
2. 在Iphone6下,px和rpx的换算关系是: 1rpx=0.5px,750rpx=375px,刚好能够填充满整个屏幕的宽度

2. 全局样式和局部样式

**全局样式: ** 在app.wxss中定义的样式规则,会作用于每一个页面

**局部样式: ** 在page.wxss重定义的样式规则,只会作用于当前页面,相同样式,会覆盖全局样式

3. 背景图

在小程序中 background-image 不支持本地路径,需要使用网络图片,或者使用工具转成base64(不建议),或者使用 <image> 组件

.bg-image {
    background-image: url("/assets/bgimage.png")   // 不能使用本地路径
    background-image: url("http://ww.xxxx.com/bgimage.png")   // 可以使用网络图片(推荐)
}

posted @ 2024-06-14 16:24 河图s 阅读(75) 评论(0) 收藏举报

刷新页面返回顶部

河图

小程序 --- 样式和组件

1. 组件 ( HTML 标签)

1. view

2. swiper 和 swiper-iitem

3. image

4. text

5. navigator

6. scroll-view

7. 字体图标

8. 表单组件

1. button

2. input

2. 样式

1. 尺寸单位( rpx )

2. 全局样式和局部样式

3. 背景图

公告