前端之微信小程序总结

**1、按条件设置class**<text wx:for="{{titles}}"   wx:key="{{item}}"   class="home-title {{index == activeIndex ? 'active' : ''}}"   bindtap='changeClassify'>  {{item.name}}</text>// index == activeIndex class为 "home-title active" 否则为 "home-title "**2、循环嵌套**// 普通的单次循环<text wx:for="{{titles}}" wx:key="{{index}}">{{item.name}}</text>//循环嵌套时使用 wx:for-item="XXX" <view wx:for="{{hotArr}}">  <view class="classify-title" bindtap="goClassifyPage">    <text>{{item.name}}</text>  </view>  <view class="classify-items">    <view class="classify-item" wx:for="{{item.data}}"  wx:for-item="cell" wx:key="index">      <view>        <text class="classify-item_name">{{cell.name}}</text>      </view>    </view>  </view></view>//wxml<text wx:for="{{titles}}" wx:key="{{index}}" bindtap='changeClassify' data-id="{{index}}">{{item.name}}</text>**3、路由以及获取参数**  //jsfunction changeClassify(e) {  //  let id = e.currentTarget.dataset.id;  //跳转到classify 页面  wx.navigateTo({    url: '../classify/classify?id=' + id  })}//classify 页面 获取参数onLoad: function (opts) {  console.log(opts.id)  console.log(this.options.id)}**4、上拉下拉**// 上拉加载更多onReachBottom: function() {  if (this.data.next != null) {    this.setData({ isHideLoadMore: false })    this.getNextPage()  }}// 下拉刷新onPullDownRefresh: function() {  this.refreshData()}**5、模板**/**    * 1. 给template 设置name    * 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"    */<template name="loading">  <view class="weui-loadmore" hidden="{{!isloading}}">    <view class="weui-loading"></view>    <view class="weui-loadmore__tips">正在加载</view>  </view> </template>/** * 使用通用的template * 1. 按路径引入* 2. 设置 is 等于 template的name data="{{isloading}}" 给template的数据*/<import src="../template/loading.wxml"/><template is="loading" data="{{isloading}}"></template>