小程序中template的用法 - 婧星

小程序中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
        })
      }
    })
  },


})

　　效果图