首先看一些官方的一些介紹。模板:模板功能是通過(guò)對(duì)template 標(biāo)簽的屬性 name=”” 去創(chuàng)建不同模板,通過(guò)is=”name的值”來(lái)使用。通過(guò)上面兩張圖,大概能看出,使用模板可以為大量類似的布局帶來(lái)便利。下面看一下我 ...
首先看一些官方的一些介紹。
模板:模板功能是通過(guò)對(duì)template 標(biāo)簽的屬性 name=”” 去創(chuàng)建不同模板,通過(guò)is=”name的值”來(lái)使用。


通過(guò)上面兩張圖,大概能看出,使用模板可以為大量類似的布局帶來(lái)便利。下面看一下我自己的一個(gè)Demo.



可以看到,除了選項(xiàng)個(gè)數(shù)的差別之外,其他布局是相同的。
下面的每一道題的模板。
<template name="carItem">
<view class="timu">
<view class="title">第{{item.id}}題</view>
<view class='question'>{{item.question}}</view>
<view class="img" wx:if="{{item.url!=''}}"><image src="{{item.url}}" /></view>
<view class='select'>A:{{item.item1}}</view>
<view class='select'>B:{{item.item2}}</view>
<view class='select' wx:if="{{item.item3!=''}}">C:{{item.item3}}</view>
<view class='select' wx:if="{{item.item4!=''}}">D:{{item.item4}}</view>
<view class='content'>答案:{{item.answer}}</view>
<view class='content'>解釋:{{item.explains}}</view>
</view>
</template>
在我們上面的代碼中,除了使用template標(biāo)簽定義模板外,還是用了條件渲染。例如當(dāng)題目為判斷題的時(shí)候。CD選項(xiàng)是沒(méi)有數(shù)據(jù)的,所以就不能顯示出來(lái),我們可以通過(guò)if語(yǔ)句判斷是否為空來(lái)決定顯示與否。
下面放出代碼。
/**
* 網(wǎng)絡(luò)請(qǐng)求
*/
function request(url, subject, model, testType, success, fail) {
if (typeof success != 'function' || typeof fail != 'function') {
return
}
wx.request({
url: url,
data: {
key: "5f0c9315c43385f5baaa3f49b79caa8f",
subject: subject,
model: model,
testType: testType,
},
success: function (res) {
if (res.data.error_code == 0) {
console.log("獲取數(shù)據(jù)成功"),
success(res.data)
} else {
wx.showModal({
title: '提示',
content: 'res.data.reason'+'請(qǐng)重新選擇',
success: function (res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
}
}
})
console.log("失敗原因" + res.data.reason)
fail(res.data.reason)
}
},
fail: function () {
fail('網(wǎng)絡(luò)出現(xiàn)問(wèn)題')
},
})
}