微信小程序 template模板詳解及實例
更新時間：2017年02月21日 17:05:31 投稿：lqh
這篇文章主要介紹了微信小程序 template模板詳解及實例的相關資料,需要的朋友可以參考下
微信小程序 template模板詳解及實例
首先看一些官方的一些介紹。
模板：模板功能是通過對template 標簽的屬性 name=”” 去創(chuàng)建不同模板，通過is=”name的值”來使用。
通過上面兩張圖，大概能看出，使用模板可以為大量類似的布局帶來便利。下面看一下我自己的一個Demo.
先放出效果圖（數據來自聚合數據）
可以看到，除了選項個數的差別之外，其他布局是相同的。
下面的每一道題的模板。
<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標簽定義模板外，還是用了條件渲染。例如當題目為判斷題的時候。CD選項是沒有數據的，所以就不能顯示出來，我們可以通過if語句判斷是否為空來決定顯示與否。
下面放出代碼。
CarUtils.js
/**
* 網絡請求
*/
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("獲取數據成功"),
success(res.data)
} else {
wx.showModal({
title: '提示',
content: 'res.data.reason'+'請重新選擇',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定')
}
}
})
console.log("失敗原因" + res.data.reason)
fail(res.data.reason)
}
},
fail: function () {
fail('網絡出現(xiàn)問題')
},
})
}
function getanswer(url,success,fail){
if( typeof success != 'function' || typeof fail != 'function' ) {
return
}
wx.request({
url:url,
data: {
key:"0794b823b484d6e1b4186d150834ae1b",
},
success: function(res){
if( res.data.error_code == 0 ) {
console.log("獲取數據成功"),
success( res.data )
} else {
console.log("失敗原因"+res.data.reason)
fail( res.data.reason )
}
},
fail: function() {
fail( '網絡出現(xiàn)問題' )
},
})
}
module.exports = {
request: request,
getanswer:getanswer
}
template.wxml
<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>
選擇界面 drivercar.js
Page({
data:{
subject: [
{name: '1', value: '科目一',checked: 'true'},
{name: '4', value: '科目四'},
],
model: [
{name: 'c1', value: 'c1',checked: 'true'},
{name: 'c2', value: 'c2'},
{name: 'a1', value: 'a1'},
{name: 'a2', value: 'a2'},
{name: 'b1', value: 'b1'},
{name: 'b2', value: 'b2'},
],
testType: [
{name: 'rand', value: '隨機（100條）',checked: 'true'},
{name: 'order', value: '全部（全部）'},
],
},
onLoad:function(options){
var that = this;
that.setData({
subject1:"1",
model1:"c1",
testType1:"rand"
})
},
confirm(){
var that=this;
wx.navigateTo({
url: 'detail/detail?subject='+that.data.subject1+'&model='+that.data.model1+'&testType='+that.data.testType1,
});
},
confirm1(){
var that=this;
wx.navigateTo({
url: 'detail_1/detail_1?subject='+that.data.subject1+'&model='+that.data.model1+'&testType='+that.data.testType1,
});
},
//科目類型
subjectChange(e){
var that = this;
console.log('科目類型：'+e.detail.value);
that.setData({
subject1:e.detail.value,
})
} ,
//駕照類型
modelChange(e){
var that = this;
console.log('駕照類型：'+e.detail.value);
that.setData({
model1:e.detail.value,
})
} ,
//測試類型
testTypeChange(e){
var that = this;
console.log('測試類型：'+e.detail.value);
that.setData({
testType1:e.detail.value,
})
} ,
})
選擇界面drivercar.wxml
<view class="container">
<!--radio-->
<view class="radio">
<text>請選擇考試類型：</text>
<radio-group class="radio-group" bindchange="subjectChange">
<label class="radio" wx:for="{{subject}}" wx:key="subject">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
</view>
<view class="radio">
<text>請選擇駕照類型：</text>
<radio-group class="radio-group" bindchange="modelChange" >
<label class="radio" wx:for="{{model}}" wx:key="model">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
</view>
<view class="radio">
<text>請選擇模式：</text>
<radio-group class="radio-group" bindchange="testTypeChange" >
<label class="radio" wx:for="{{testType}}" wx:key="testType">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
</view>
<!--button-->
<text class="nav" bindtap="confirm">確定選擇</text>
</view>
選擇界面drivercar.wxss
.radio{ margin: 20rpx;}
.radio text{margin: 20rpx;}
.nav {
border: 1px solid #DFDFDF;
border-radius: 10px;
text-align: center;
width: 50%;
float: left;
height: 60rpx;
line-height: 60rpx;
margin-bottom:30rpx;
margin-top: 30rpx;
margin-left:25%;
margin-right:25%;
}
題目界面detail.js
var util = require('../../../../Utils/CarUtils.js')
var url = 'http://api2.juheapi.com/jztk/query'
var answerurl = "http://api2.juheapi.com/jztk/answers"
Page({
data: {
loadingHide: false,
ResList: {
"error_code": 0,
"reason": "success",
"result": {
1: "A",
2: "B",
3: "C",
4: "D",
7: "AB",
8: "AC",
9: "AD",
10: "BC",
11: "BD",
12: "CD",
13: "ABC",
14: "ABD",
15: "ACD",
16: "BCD",
17: "ABCD"
}
},
},
onLoad: function (options) {
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
<import src="../../../../common/templet.wxml"/>
<scroll-view scroll-y="true" class="page-body" >
<template is="carItem" data="{{item}}" wx:for="{{mTimuLIs}}" wx:key="TimuList"/>
</scroll-view>
<loading hidden="{{loadingHide}}">
加載中...
</loading>
全局樣式 app.wxss
.container {
height:100%;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-size: 100%;
}
.item-view{
padding: 10px;
display: flex;
flex-direction: column;
border-top: 1px solid #DEDEDE;
border-left: 1px solid #DEDEDE;
box-shadow: 2px 2px 2px #C7C7C7;
margin: 10px;
border-radius: 5px;
}
.item-view .content{color: black;}
.item-view .date{ color: grey;margin-top: 10px;}
.item-view image{width: 100%;height: 400rpx;margin-top: 10rpx;}
.loading-view{display: flex;flex-direction: row; justify-content: center;align-items: center;padding: 10px;}
.timu{border: 1px solid #DFDFDF;margin: 20rpx;border-radius: 10px;}
.timu .title{font-size: 40rpx; }
.timu .question{text-indent: 20rpx;margin-left: 10rpx; padding: 10rpx;}
.timu .img{width: 100%;display:flex;flex-direction: column;align-items: center;margin: 0 auto;padding-top: 10rpx;padding-bottom: 10rpx;}
.timu .content{font-size: 30rpx;padding: 10rpx;margin-left: 20rpx }
.timu .select{font-size: 30rpx;margin-left: 30rpx;margin-right: 30rpx; padding: 20rpx; }
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要介紹了Javascript基礎知識中關于內置對象的相關知識的相關資料,需要的朋友可以參考下面小編薇大家?guī)淼木饰恼?/div> 2021-09-09
本文主要介紹Wireshark基本介紹和學習TCP三次握手,這里詳細整理了相關資料，并給出詳細流程，有需要的小伙伴可以參考下2016-08-08
這篇文章主要為大家介紹了JS前端設計模式之發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 選項卡的簡單實例的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 檢查接口狀態(tài)實例詳解的相關資料,需要的朋友可以參考下2017-06-06
axios進度條onDownloadProgress函數total參數undefined解決分析
這篇文章主要介紹了axios進度條onDownloadProgress函數total參數undefined解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
mitt tiny-emitter發(fā)布訂閱應用場景源碼解析
這篇文章主要為大家介紹了mitt tiny-emitter發(fā)布訂閱應用場景源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了JS函數式編程實現(xiàn)XDM示例詳解第2/3篇，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
微信小程序 scroll-view組件實現(xiàn)列表頁實例代碼
這篇文章主要介紹了微信小程序 scroll-view組件實現(xiàn)列表頁實例代碼的相關資料,scroll-view組件介紹scroll-view是微信小程序提供的可滾動視圖組件,其主要作用是可以用來做手機端經常會看到的上拉加載 ，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了TypeScript基礎類型，布爾值、數字、字符串、任意類型等多種類型，下面我們就來看看這些類型的詳細介紹,需要的朋友可以參考一下，希望對你有所幫助2021-12-12最新評論