小程序中template的用法

demo案例：

wxml代碼：

<view>
    <text>template使用demo</text>
    <!-- <view wx:for="{{arry}}">
      <text>{{item.workName}}</text>
      <text>{{item.work}}</text>
    </view> -->
    <!-- 模板 -->
    <scroll-view class="has-body" scroll-y="true">
      <template name="items">
        <view class="hasItem">
            <text>{{idx+1}}{{workName}}</text>
            <view>
                學科：{{ways}}，共有{{count}}次
            </view>
        </view>
      </template>
      <view wx:for="{{arry}}" wx:key="id" wx:for-index='idx' class="list" data-classId="{{item.id}}" data-name="{{item.ways}}"  style="height:100%;" bindtap="addEvent">
        <template is="items"  data="{{...item,idx:idx}}" />
        
      </view>
    </scroll-view>
</view>

　wxss代碼

/* pages/temptl/temptl.wxss */
.has-body{
  height: 100%;
}
.hasItem{
  background: red;
  min-height: 80rpx;
  width: 100%;
  margin: 10rpx auto;
  padding: 10rpx;

}

 

js代碼

// pages/temptl/temptl.js
const app = getApp();
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    arry:[],
  },
  addEvent:function(e){//獲取點擊事件
    console.log('點擊事件', e.currentTarget.dataset);
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log('獲取url拼接的參數',options);//截取字符串拼接的東西
    this.getAllData();
  },
  getAllData:function(){
    let that = this;
    wx.request({
      url: 'https://easy-mock.com/mock/5d11cec4e7e306239b6b37ae/example/workTable',
      method:'post',
      // data:{},
      header:{
        'content-type': 'application/x-www-form-urlencoded',
        // 'cookie': wx.getStorageSync("sessionid")//獲取sessionId保持一致
      },
      success:function(res){
        console.log(res);
        if (res.data.code=="0000"){
          if(res.data.data !=null){
            if(res.data.data.length!=0){
              that.setData({
                arry:res.data.data
              })
              console.log('打印數據',that.data.arry);
            }else{
              wx.showToast({
                title: '暫無數據',
                icon: 'none',
                duration: 2000
              })
            }
          }else{
            wx.showToast({
              title: '暫無數據',
              icon: 'none',
              duration: 2000
            })
          }
        }else{
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }
      },
      fail:function(e){
        wx.showModal({
          title: '',
          content: '服務器出現異常',
          showCancel: false
        })
      }
    })
  },


})

　　效果圖