微信小程序开发（常用标签用法-第一篇）

目录：

text标签 view标签 scroll-view标签 block标签 swiper标签

text标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

① 类似于html中span标签，但它的属性使它在小程序中地位显著提高。

② 在微信小程序中只有这个标签有长按文字可以复制的功能，不使用这个标签则无法进行小程序中文字复制的功能。

③ 可以对空格、回车进行编码。如果不加decode属性，则无法对&nbsp等之类的字符进行解码。

代码语言：javascript复制

<text decode='true'>可以对这里的字符进行解码</text>

view标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

① 相当于div标签，这个没有什么需要详细注意的，使用基本与div无异。

② 与它类似的一个标签<scroll-view>需要关注一下。该标签可以声明一个可滚动视图区域。

scroll-view标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

① 需要注意的是<scroll-view>在使用中需要给一个固定的高度height。

② 需要加入属性横向scroll-x或纵向scroll-y滚动的属性来指定该滚动视图的滚动方向。

示例：

代码语言：javascript复制

<scroll-view scroll-y scroll-into-view="" class="left_menu">
   <view wx:for="{{leftMenuList}}" wx:key="id" class="menu_item">
     {{item.title}}
   </view>
</scroll-view>

该标签属性比较多，不过常用和实用的就那两个。更多的属性可以移步官方文档查看。

适用场景：分类页需要有两个可滚动视图，一个是左侧商品分类，另一个是右侧商品列表。

block标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html#block wx:for

当想要循环一个标签的时候，可以使用block标签，最后在调试台不会显示标签以及属性内容。只会显示循环后的内文本内容。

该标签一般搭配for或if来实用，只使用<block>标签无任何意义。

示例：

代码语言：javascript复制

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}} </view>
  <view> {{item}} </view>
</block>

swiper标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

在电商小程序中必备组件，一般用于轮播图。

常用属性	描述
autoplay	自动轮播，默认为五秒
interval	修改轮播时间，单位为毫秒
circular	循环轮播
indicator-dots	轮播图的指示器
indicator-color	指定指示器的未选择的颜色
indicator-active-color	指定指示器的选中时的颜色

示例：

代码语言：javascript复制

<!--轮播图-->
<view class="index_swiper">
  <swiper class="swiper_a">
    <swiper-item class="" item-id="">
      <navigator>
        <image mode="widthFix" src="图片路径"></image>
      </navigator>
    </swiper-item>
    <swiper-item class="" item-id="">
      <navigator>
        <image mode="widthFix" src="图片路径"></image>
      </navigator>  
    </swiper-item>
  </swiper>
</view>

由于篇幅太长了，这里分成两篇吧。

javascript 官方文档 https html 网络安全

0 人点赞