text标签
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/text.html
① 类似于html 中span 标签,但它的属性在小程序中让它地位显著提高。
② 在微信小程序中只有这个标签有长按文字可以复制 的功能,不使用这个标签则无法进行小程序中文字复制的功能。
③ 可以对空格、回车进行编码。如果不加decode 属性,则无法对  等之类的字符进行解码。
<text decode='true'>可以对这里的字符进行解码</text>
view标签
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/view.html
① 相当于div标签,这个没有什么需要详细注意的,使用基本与div 无异。
② 与它类似的一个标签<scroll-view> 需要关注一下。该标签可以声明一个可滚动视图区域。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
① 需要注意的是<scroll-view> 在使用中需要给一个固定的高度height 。
② 需要加入属性横向scroll-x 或纵向scroll-y 滚动的属性来指定该滚动视图的滚动方向。
<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标签
当想要循环一个标签的时候,可以使用block标签,最后在调试台不会显示标签以及属性内容。只会显示循环后的内文本内容。
示例:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}} </view>
<view> {{item}} </view>
</block>
swiper标签
在电商小程序中必备组件,一般用于轮播图。
常用属性 |
描述 |
autoplay |
自动轮播,默认为五秒 |
interval |
修改轮播时间,单位为毫秒 |
circular |
循环轮播 |
indicator-dots |
轮播图的指示器 |
indicator-color |
指定指示器的未选择的颜色 |
indicator-active-color |
指定指示器的选中时的颜色 |
|