首先看一些官方的一些介绍。
模板:模板功能是通过对template 标签的属性 name=”” 去创建不同模板,通过is=”name的值”来使用。
通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利。下面看一下我自己的一个Demo.
先放出效果图(数据来自聚合数据)
可以看到,除了选项个数的差别之外,其他布局是相同的。
下面的每一道题的模板。
<template name=carItem> <view class=timu> <view class=title>第pw_item.id题</view> <view class='question'>pw_item.question</view> <view class=img wx:if=pw_item.url!=''><image src=pw_item.url /></view> <view class='select'>A:pw_item.item1</view> <view class='select'>B:pw_item.item2</view> <view class='select' wx:if=pw_item.item3!=''>C:pw_item.item3</view> <view class='select' wx:if=pw_item.item4!=''>D:pw_item.item4</view> <view class='content'>答案:pw_item.answer</view> <view class='content'>解释:pw_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('网络出现问题') }, }) } 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( '网络出现问题' ) }, }) } module.exports = { request: request, getanswer:getanswer }
template.wxml
<template name=carItem> <view class=timu> <view class=title>第pw_item.id题</view> <view class='question'>pw_item.question</view> <view class=img wx:if=pw_item.url!=''><image src=pw_item.url /></view> <view class='select'>A:pw_item.item1</view> <view class='select'>B:pw_item.item2</view> <view class='select' wx:if=pw_item.item3!=''>C:pw_item.item3</view> <view class='select' wx:if=pw_item.item4!=''>D:pw_item.item4</view> <view class='content'>答案:pw_item.answer</view> <view class='content'>解释:pw_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=pw_subject wx:key=subject> <radio value=pw_item.name checked=pw_item.checked/>pw_item.value </label> </radio-group> </view> <view class=radio> <text>请选择驾照类型:</text> <radio-group class=radio-group bindchange=modelChange > <label class=radio wx:for=pw_model wx:key=model> <radio value=pw_item.name checked=pw_item.checked/>pw_item.value </label> </radio-group> </view> <view class=radio> <text>请选择模式:</text> <radio-group class=radio-group bindchange=testTypeChange > <label class=radio wx:for=pw_testType wx:key=testType> <radio value=pw_item.name checked=pw_item.checked/>pw_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
题目界面 detail.wxml
<import src=../../../../common/templet.wxml/> <scroll-view scroll-y=true class=page-body > <template is=carItem data=pw_item wx:for=pw_mTimuLIs wx:key=TimuList/> </scroll-view> <loading hidden=pw_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; }