目录:
text标签
view标签
scroll-view标签
block标签
swiper标签
text标签官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/text.html
① 类似于html中span标签,但它的属性使它在小程序中地位显著提高。
② 在微信小程序中只有这个标签有长按文字可以复制的功能,不使用这个标签则无法进行小程序中文字复制的功能。
③ 可以对空格、回车进行编码。如果不加decode属性,则无法对 等之类的字符进行解码。
代码语言:javascript代码运行次数:0运行复制
① 相当于div标签,这个没有什么需要详细注意的,使用基本与div无异。
② 与它类似的一个标签
scroll-view标签官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
① 需要注意的是
② 需要加入属性横向scroll-x或纵向scroll-y滚动的属性来指定该滚动视图的滚动方向。
示例:
代码语言:javascript代码运行次数:0运行复制
{{item.title}}
该标签属性比较多,不过常用和实用的就那两个。更多的属性可以移步官方文档查看。
适用场景:分类页需要有两个可滚动视图,一个是左侧商品分类,另一个是右侧商品列表。
block标签官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html#block%20wx:for
当想要循环一个标签的时候,可以使用block标签,最后在调试台不会显示标签以及属性内容。只会显示循环后的内文本内容。
该标签一般搭配for或if来实用,只使用
示例:
代码语言:javascript代码运行次数:0运行复制
swiper标签官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
在电商小程序中必备组件,一般用于轮播图。
常用属性
描述
autoplay
自动轮播,默认为五秒
interval
修改轮播时间,单位为毫秒
circular
循环轮播
indicator-dots
轮播图的指示器
indicator-color
指定指示器的未选择的颜色
indicator-active-color
指定指示器的选中时的颜色
示例:
代码语言:javascript代码运行次数:0运行复制
由于篇幅太长了,这里分成两篇吧。