开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第14天,点击查看活动详情
列表渲染
- wx:for 可以根据指定的数组,循环渲染重复的组件结构,索引用index,循环项用item
- wx:for-index可以重命名索引名,wx:for-item可以重命名循环项名
- wx:key可以指定id或index做唯一key值(不写key值终端会
这样的错误)
wxss模板样式
- 扩展特性:
rpx
尺寸单位- @import样式导入
rpx的实现原理
-
不同设备屏幕的大小不同因此rpx将所有屏幕宽度分为750份,同时自动换算成像素进行适配。这样小屏缩小,大屏放大实现自动适配
-
rpx和px的换算
样式导入
@import后跟需要导入的外联样式表的相对路径,以;结尾
- 全局样式:app.wxss
- 局部样式:对应页面的xxx.wxss
全局配置
-
app.json文件是小程序的全局配置文件
-
pages是当前所有页面的存放路径
-
window是全局设置窗口外观(除页面主体部分)
-
常见配置项:
下拉刷新:手指在屏幕上的下拉滑动,重新加载页面数据
app.json->window->'enablePullDownRefresh':'true'(会作用全部页面,因此一般在单独页面设置)
- 监听下拉刷新动作,用到onPullDownRefresh实现重新渲染数据
- 关闭下拉刷新效果
上拉触底:手指在屏幕上拉滑动,加载更多数据 app.json->window->onReachBottomDistance设置新数值(默认距离为50px,若无特殊需求无需改动)
-
页面上拉触底的处理函数onReachBottom
- tabBar设置小程序的底部或顶部tab栏效果
1) tabBar中只能配置最少2个、最多5个tab页签
2) 当渲染顶部tabBar时,不显示icon,只显示文本
3) 组成部分
5. style组件启用新版样式('style':'v2')