微信小程序之template模板介绍
微信小程序 template模板详解及实例
首先看一些官方的一些介绍。
模板：模板功能是通过对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; }以上是微信小程序之template模板介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
wapi是什么东西详细介绍
Jan 07, 2024 pm 09:14 PM
wapi这个名词用户们可能在使用网络得时候见到过，但是对于一部分人来说肯定都不知道wapi是什么，下面就带来了详细介绍，帮助不知道小伙伴去了解。wapi是什么东西：答：wapi是无线局域网鉴别和保密的基础结构。这就像红外线和蓝牙等功能一样，一般都覆盖在办公楼等地方的附近。基本都是为一个小部门所有的，所以这个功能涉及的范围只有几公里。wapi相关介绍：1、wapi是无线局域网里面的一种传输协议。2、这款技术是可以去避免窄频带通信的问题，可以更好的去进行传播。3、仅仅只需要一个代码就可以去传送信号了
详解win11能否运行PUBG游戏
Jan 06, 2024 pm 07:17 PM
pubg又称绝地求生，是一款非常经典的射击大逃杀类型游戏，从2016年火爆以来一直拥有非常多的玩家。在最近的win11系统推出后，就有不少玩家想要在win11上游玩它，下面就跟着小编来看看win11是否可以玩pubg吧。win11能玩pubg吗：答：win11可以玩pubg。1、在win11推出之初，因为win11需要开启tpm的缘故，所以导致很多玩家被pubg封号处理了。2、不过后来根据玩家的反馈，蓝洞方面已经解决了这个问题，目前已经可以在win11中正常玩pubg了。3、如果大家遇到了pub
Python函数介绍：exec函数的介绍及示例
Nov 03, 2023 pm 02:09 PM
Python函数介绍：exec函数的介绍及示例引言：在Python中，exec是一种内置函数，它用于执行存储在字符串或文件中的Python代码。exec函数提供了一种动态执行代码的方式，使得程序可以在运行时根据需要生成、修改和执行代码。本文将介绍exec函数的使用方法，并给出一些实际的代码示例。exec函数的使用方法：exec函数的基本语法如下所示：exec
i5处理器是否能装win11详细介绍
Dec 27, 2023 pm 05:03 PM
i5是英特尔旗下的一系列处理器，拥有到现在11代i5的各种不同版本，每一代都有着不同性能。因此对于i5处理器是否能够安装win11，还需要看是第几代的处理器，下面就跟着小编一起来分别了解一下吧。i5处理器能装win11吗：答：i5处理器能装win11。一、第八代及之后的i51、第八代及后续的i5处理器是能够满足微软的最低配置需求的。2、因此我们只需要进入微软网站，下载一个“win11安装助手”3、下载完成后，运行该安装助手，根据提示进行操作就可以安装win11了。二、第八代之前的i51、第八代之
实现微信小程序中的卡片翻转特效
Nov 21, 2023 am 10:55 AM
实现微信小程序中的卡片翻转特效在微信小程序中，实现卡片翻转特效是一种常见的动画效果，可以提升用户体验和界面交互的吸引力。下面将具体介绍如何在微信小程序中实现卡片翻转的特效，并提供相关代码示例。首先，需要在小程序的页面布局文件中定义两个卡片元素，一个用于显示正面内容，一个用于显示背面内容，具体示例代码如下：<!--index.wxml-->&l
介绍最新的Win 11声音调法方法
Jan 08, 2024 pm 06:41 PM
很多用户更新了最新的win11之后发现自己系统的声音有了些许的变化，但是又不知道该怎么去进行调整，所以今天本站就给你们带来了电脑最新win11声音调法介绍，操作不难而且选择多样，快来一起下载试试吧。电脑最新系统windows11声音如何调1、首先右击桌面右下角的声音图标，并选择“播放设置”。2、然后进入设置中点击播放栏中的“扬声器”。3、随后点击右下方的“属性”。4、点击属性中的“增强”选项栏。5、此时如果“禁用所有声音效果”前的√勾上了就把他取消。6、之后就可以选择下面的声音效果来进行设置并点
支付宝上线'汉字拾光-生僻字”小程序，用于征集、补充生僻字库
Oct 31, 2023 pm 09:25 PM
本站10月31日消息，今年5月27日，蚂蚁集团宣布启动“汉字拾光计划”，最近又迎来新进展：支付宝上线“汉字拾光-生僻字”小程序，用于向社会征集生僻字，补充生僻字库，同时提供不同的生僻字输入体验，以帮助完善支付宝内的生僻字输入方法。目前，用户搜索“汉字拾光”、“生僻字”等关键词就可以进入“生僻字”小程序。在小程序里，用户可以提交尚未被系统识别录入的生僻字图片，支付宝工程师在确认后，将会对字库进行补录入。本站注意到，用户还可以在小程序体验最新的拆字输入法，这一输入法针对读音不明确的生僻字设计。用户拆
uniapp如何实现小程序和H5的快速转换
Oct 20, 2023 pm 02:12 PM
uniapp如何实现小程序和H5的快速转换，需要具体代码示例近年来，随着移动互联网的发展和智能手机的普及，小程序和H5成为了不可或缺的应用形式。而uniapp作为一个跨平台的开发框架，可以在一套代码的基础上，快速实现小程序和H5的转换，大大提高了开发效率。本文将介绍uniapp如何实现小程序和H5的快速转换，并给出具体的代码示例。一、uniapp简介unia
