小程序基础篇(三)——样式与列表渲染

115 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第14天,点击查看活动详情

列表渲染

  • wx:for 可以根据指定的数组,循环渲染重复的组件结构,索引用index,循环项用item
  • wx:for-index可以重命名索引名,wx:for-item可以重命名循环项名
  • wx:key可以指定id或index做唯一key值(不写key值终端会

image.png 这样的错误)

wxss模板样式

  • 扩展特性:
  1. rpx尺寸单位
  2. @import样式导入

image.png

rpx的实现原理

  • 不同设备屏幕的大小不同因此rpx将所有屏幕宽度分为750份,同时自动换算成像素进行适配。这样小屏缩小,大屏放大实现自动适配

  • rpx和px的换算

image.png

image.png

样式导入

@import后跟需要导入的外联样式表的相对路径,以;结尾

image.png

  • 全局样式:app.wxss
  • 局部样式:对应页面的xxx.wxss

全局配置

  • app.json文件是小程序的全局配置文件

    1. pages是当前所有页面的存放路径

    2. window是全局设置窗口外观(除页面主体部分) image.png

常见配置项: image.png

下拉刷新:手指在屏幕上的下拉滑动,重新加载页面数据

app.json->window->'enablePullDownRefresh':'true'(会作用全部页面,因此一般在单独页面设置)

image.png

  • 监听下拉刷新动作,用到onPullDownRefresh实现重新渲染数据

image.png

  • 关闭下拉刷新效果

image.png

上拉触底:手指在屏幕上拉滑动,加载更多数据 app.json->window->onReachBottomDistance设置新数值(默认距离为50px,若无特殊需求无需改动)

  • 页面上拉触底的处理函数onReachBottom

  1. tabBar设置小程序的底部或顶部tab栏效果
1) tabBar中只能配置最少2个、最多5个tab页签
2) 当渲染顶部tabBar时,不显示icon,只显示文本

3) 组成部分

image.png

image.png

image.png

image.png 5. style组件启用新版样式('style':'v2')