view
类似div 块状元素 可设置 宽高!
fix-direction:row 横向布局
fix-direction:column 纵向布局
横向滑动
标签组件: swiper和swiper-item(单个页面)
一般都是照片! 视屏和音频都可不行,上传代码包大小有限制!
swiper组件常用属性:
indicator-dots boolean false 是否显示面板指示点! indicator-color="#ccc" color 只能用十六进制 指示点颜色! indicator-active-color="blue" 当前选中的指示点颜色! autoplay boolean false 是否自动切换! interval number 5000(毫秒) 自动切换的时间! circular boolean false 是否采用衔接滑动!
<swiper class="swiper-container" indicator-dots indicator-color="#ccc" indicator-active-color="blue" circular> <!-- 第一项轮播图 --> <swiper-item> <view class="item"> <image src="/img/001.jpg"></image> </view> </swiper-item> <!-- 第二项轮播图 --> <swiper-item> <view class="item"> <image src="/img/002.jpg"></image> </view> </swiper-item> <!-- 第三项轮播图 --> <swiper-item> <view class="item"> <image src="/img/003.jpg"></image> </view> </swiper-item> </swiper>
竖向滑动
组件: scroll-view 滚动的视图容器 必须给个固定高度!
<!-- scroll-y 属性 允许竖向滚动 --> <!-- 注意,使用竖向滚动时,必须给个固定高度 --> <!-- scroll-x 属性 允许横向滚动 --> <scroll-view scroll-y> • <view></view> • <view></view> • <view></view> </scroll-view>
text标签
类似HTML中span标签 是个行内标签!
该标签只有一个作用 selectable(要加,不加效果不显示)!
<text selectable>15876345671</text>
在实际页面 长按可以复制!!
rich-text
渲染HTML标签-用于小程序书写
要知道,HTML标签与小程序标签不是一个概念,不能直接用!</