渲染与WXSS

条件渲染

根据条件对页面内容进行渲染。

javascript

<view wx:if="{{gender == 0}}">男</view>
<view wx:elif="{{gender == 1}}">女</view>
<view wx:else="{{gender == 2}}">外星人</view>
<button bindtap="btnTaped">修改</button>

block

一个虚拟的包裹容器，不在页面中渲染。

javascript

<block>
  <view>block</view>
</block>

列表渲染

javascript

Page({
  data:{
    lists: ['苹果','橘子','柠檬']
  },
})

javascript

// wxml
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view wx:for="{{lists}}">
      名称: {{item}}, 序号: {{index}}
    </view>
  </view>
</scroll-view>

指定index或item的变量名

javascript

<view wx:for="{{lists}}" wx:for-index="idx" wx:for-item="name">
  名称: {{name}}, 序号: {{idx}}
</view>

指定key，提高效率

javascript

Page({
  data:{
    lists: [
      {id: 1, name: '苹果'},
      {id: 2, name: '桃子'},
      {id: 3, name: '西瓜'},
    ]
  },
})

javascript

// wxml
<view class="container">
  <view wx:for="{{lists}}" wx:key="id">
    名称: {{item.name}}, 序号: {{index}}
  </view>
</view>

注意，key不需要包裹在双花括号里

WXSS

wxss支持部分选择器，使用rpx作为尺寸单位，使用@import作为样式导入的关键词。

rpx(responsive pixel)是微信小程序独有的，用来解决屏幕适配的尺寸单位。它把所有屏幕在宽度上等分750份。

javascript

// 定义一个根目录下的common文件夹中的wxss，假设叫common.wxss
.name-color{
  color: red;
}

javascript

// 到全局或页面wxss中导入外部wxss
@import "/common/common.wxss"

javascript

// 在wxml中应用
<view class="name-style">很重要</view>

渲染与WXSS ​

条件渲染 ​

block ​

列表渲染 ​

WXSS ​

渲染与WXSS

条件渲染

block

列表渲染

WXSS