微信小程序 template模板详解及实例

发布时间：2020-12-14 20:20:29 所属栏目：资源来源：网络整理

导读：微信小程序 template模板详解及实例首先看一些官方的一些介绍。模板：模板功能是通过对template 标签的属性 name=”” 去创建不同模板，通过is=”name的值”来使用。通过上面两张图，大概能看出，使用模板可以为大量类似的布局带来便利。下面看一下我自己

微信小程序 template模板详解及实例

首先看一些官方的一些介绍。

模板：模板功能是通过对template 标签的属性 name=”” 去创建不同模板，通过is=”name的值”来使用。

通过上面两张图，大概能看出，使用模板可以为大量类似的布局带来便利。下面看一下我自己的一个Demo.

先放出效果图（数据来自聚合数据）

可以看到，除了选项个数的差别之外，其他布局是相同的。

下面的每一道题的模板。

{{item.question}} A：{{item.item1}} B：{{item.item2}} 答案:{{item.answer}} 解释:{{item.explains}}

在我们上面的代码中，除了使用template标签定义模板外，还是用了条件渲染。例如当题目为判断题的时候。CD选项是没有数据的，所以就不能显示出来，我们可以通过if语句判断是否为空来决定显示与否。

下面放出代码。

CarUtils.js

template.wxml

{{item.question}} A：{{item.item1}} B：{{item.item2}} 答案:{{item.answer}} 解释:{{item.explains}}

选择界面 drivercar.js

选择界面drivercar.wxml

请选择考试类型：请选择驾照类型：请选择模式：

选择界面drivercar.wxss

}

题目界面detail.js

var that = this
var z=1;
var mTimuLIs={}
util.request(url,options.subject,options.model,options.testType,function (dataJson) {
  console.log(options.model + "model");
  console.log(options.testType + "testType");
  console.log(options.subject + "subject");
  console.log("请求成功00");

  mTimuLIs=dataJson["result"];
  console.log(mTimuLIs.length);
  for (var i = 0; i < mTimuLIs.length; i++) {

    //console.log(that.data.ResList.result[1]);
    var y= parseInt(mTimuLIs[i].answer);
     //console.log(y);
    mTimuLIs[i].answer = that.data.ResList.result[y];
    mTimuLIs[i].id=parseInt(i+z);
    // console.log(that.data.ResList.result[y]);
  }
  that.setData({
    mTimuLIs: mTimuLIs,loadingHide: true
  })
},function (reason) {
    console.log(reason);
    that.setData({
      loadingHide: true
    })
  })

},})

题目界面 detail.wxml