資訊專欄INFORMATION COLUMN
摘要：下面就用我自己的一個(gè)模塊來講解下。這和點(diǎn)擊事件是一個(gè)道理的，你必須給你的每項(xiàng)數(shù)據(jù)綁定一個(gè)，用語句，將數(shù)組遍歷一遍，將每個(gè)數(shù)據(jù)的拿出來看看，看下你點(diǎn)的這個(gè)數(shù)據(jù)的，與數(shù)組中哪個(gè)相符合。
前言
最近10幾天都在學(xué)習(xí)小程序的開發(fā)，遇到了一些問題和筆記有趣的東西，今天總結(jié)了一下，和大家分享
1.小程序中的template模塊使用在一個(gè)月黑風(fēng)高的夜晚，我突然發(fā)現(xiàn)一個(gè)很有意思的東西，那就是template模塊，它可以將你定義的一個(gè)HTML5模塊包住，然后利用template，在你的小程序任意一個(gè)頁面使用，這樣極大的減少了程序中的復(fù)制-粘貼，復(fù)制-粘貼(一般用于需要循環(huán)使用的界面)。下面就用我自己的一個(gè)template模塊來講解下。
第一步：創(chuàng)建頁面在pages里面創(chuàng)建存儲你template模塊的頁面，便于其他頁面對其的引用
"pages/index/index", "pages/find/find", "pages/gift/gift", "pages/activity/activity", "pages/common/list",//存儲template模塊的頁面 "pages/white/white"第二步：創(chuàng)建template模塊
template模塊實(shí)例//點(diǎn)擊跳轉(zhuǎn) {{title}} {{school}} {{pink}} {{time}} {{cool}} {{page__ft}}}
在你需要重復(fù)使用的html用一個(gè)標(biāo)簽包起來，并給它取個(gè)名字 。
（當(dāng)然了，還有WXSS的編寫，這里因?yàn)椴皇呛苤匾揖筒环懦鰜砹耍?br>完成了這步，你就可以盡情的在你需要這個(gè)模板的頁面引用這個(gè)模塊了。
①在你想要引用的界面的WXSS和WXML上引用template的wxml和wxss，
@import "../common/list.wxss";
②在你需要的盒子里面添加template標(biāo)簽，你想要引用那個(gè)template模塊，就在is里面填哪個(gè)模塊的名字
如果你是在一個(gè)循環(huán)里面引用的template就需要改為data="{{...item}}"如：
代碼：
活動 視頻 直播
效果圖：
又是一個(gè)月黑風(fēng)高的夜晚，我在實(shí)現(xiàn)點(diǎn)亮的功能的時(shí)候，發(fā)現(xiàn)我只點(diǎn)了一個(gè)地方的點(diǎn)贊，整個(gè)頁面的點(diǎn)贊都亮了起來，這肯定是不行的，用戶明明只對這一個(gè)感興趣，你怎么能全部點(diǎn)亮呢？于是我開始了思考，發(fā)現(xiàn)我犯了一個(gè)十分愚蠢的問題，那就是沒有給我的數(shù)據(jù)綁定一個(gè)值，這就好像沒有給喊名字一樣：到了飯點(diǎn)你出去大喊一聲:兒子,回家吃飯了!結(jié)果肯定是家家的兒子都回去吃飯了，然而別人家的飯都還沒開始煮呢，你怎么就喊人家回去了呢，你肯定得喊：二狗子，回家吃飯了！別人家的娃才不會也跟著回家。這和點(diǎn)擊事件是一個(gè)道理的，你必須給你的每項(xiàng)數(shù)據(jù)綁定一個(gè)id，用if語句，將數(shù)組遍歷一遍，將每個(gè)數(shù)據(jù)的ID拿出來看看，看下你點(diǎn)的這個(gè)數(shù)據(jù)的ID，與數(shù)組中哪個(gè)相符合。如何成功配對了 ，恭喜，你可以執(zhí)行點(diǎn)亮操作了！
功能實(shí)現(xiàn)如下：
wxml
效果圖
3.下拉刷新觸發(fā)過多問題又是一個(gè)月黑風(fēng)高的夜晚，我突然發(fā)現(xiàn)了一個(gè)bug！在小程序下拉刷新時(shí)，我明明只加了一組數(shù)據(jù)，然而卻刷出來了2到3組數(shù)據(jù)，（這里我使用的是scroll-view組件的bindscrolltolower屬性）
嚇得我趕緊回去看了一波代碼，如下：
lower:function(){
// if(i!=1){
// return
// }i++;
var that = this;
// console.log("下拉加載");
wx.showToast({
title:"加載中",
icon:"loading",
duration: 1000,
});
setTimeout(function(){
wx.showToast({
title:"加載成功",
icon:"success",
duration:1000,
});
wx.request({
url:"https://www.easy-mock.com/mock/5a24075682614c0dc1bf0997/abc/abc",
complete:(res)=>{
console.log(that.data.jobs);
var jobs = that.data.jobs.concat(res.data.data.jobs)
that.setData({
jobs:jobs,
})
},
})
},1000);
},
仔細(xì)看看，發(fā)現(xiàn)并沒有邏輯錯(cuò)誤，我思前想后，覺得有可能是函數(shù)多次觸發(fā)導(dǎo)致的，于是我在函數(shù)的開始加入 console.log("下拉加載");在調(diào)試器中，我發(fā)現(xiàn)下拉刷新也是跟著出現(xiàn)了2次，為了更加保險(xiǎn)，我在page外定義了一個(gè)var i = 1；并在函數(shù)外面加上了
if(i!=1){
return
}i++;
再次測試，發(fā)現(xiàn)只出現(xiàn)了一組數(shù)據(jù)，由此我確定了這個(gè)bug是由于下拉刷新觸發(fā)過多的原因。但是怎么解決呢，我想了想，覺得可以用一個(gè)鎖，把這個(gè)函數(shù)鎖起來，等函數(shù)執(zhí)行完畢，在把函數(shù)打開。
修改后的函數(shù)如下：
data: {
jobs:[],
windowHeigt:0,
pullUpAllow:true,
pullLowAllow:true
},
lower:function(){
var that = this;
if(that.data.pullLowAllow) { //確定開關(guān)的開啟與否
that.setData({
pullLowAllow:false //關(guān)閉開關(guān)
})
console.log("下拉加載");
wx.showToast({
title:"加載中",
icon:"loading",
duration: 1000,
});
setTimeout(function(){
wx.showToast({
title:"加載成功",
icon:"success",
duration:1000,
});
wx.request({
url:"https://www.easy-mock.com/mock/5a24075682614c0dc1bf0997/abc/abc",
complete:(res)=>{
console.log(that.data.jobs);
var jobs = that.data.jobs.concat(res.data.data.jobs)
that.setData({
jobs:jobs,
pullLowAllow:true //加載完畢，開啟開關(guān)
})
},
})
},1000);
}
},
結(jié)果：
這里
項(xiàng)目展示在最后，也把我辛苦Coding了N天的項(xiàng)目展示一下給大家吧
（由于一開始選題的失敗，并沒有完成什么重要的功能，大家就別說出來了T-T）
底部tabBar切換
圖片輪播與界面切換
點(diǎn)擊事件
下拉刷新與上拉刷新
總結(jié)要熟讀微信小程序官方文檔,勤用小程序自帶的API，可以節(jié)省很多時(shí)間和精力
阿里巴巴的iconfont是真的好用，很多圖標(biāo)都可以在上面下載，不僅有png版還有svg版
Easy Mock 可以建立一個(gè)假后臺，對于我們學(xué)習(xí)小程序有很大的幫助
weui框架對小程序有很大的幫助
項(xiàng)目地址https://github.com/fsafafaf/d...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90323.html
摘要：事件與自定義屬性頁面跳轉(zhuǎn)參數(shù)傳遞與接收頁面跳轉(zhuǎn)的五種方式頁面間參數(shù)傳遞與接收方法帶參數(shù)發(fā)送方發(fā)送參數(shù)，帶參數(shù)模式發(fā)送評接收方接收參數(shù)，通過生命周期函數(shù)中的參數(shù)獲取參數(shù)頁面間參數(shù)傳遞與接收方法全局參數(shù)發(fā)送方接收方頁面間參數(shù) 事件與自定義屬性 頁面跳轉(zhuǎn)、參數(shù)傳遞與接收 頁面跳轉(zhuǎn)的五種方式 1、wx.navigateTo(obj) 2、wx.redirectTo(obj) 3、wx.swit...
摘要：配置配置全解析項(xiàng)目配置文件文件描述項(xiàng)目配置文件項(xiàng)目代碼配置是否檢查域名安全性和版本是否將項(xiàng)目的代碼轉(zhuǎn)成是否自動補(bǔ)全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項(xiàng)目名項(xiàng)目配置搜索關(guān)鍵字客服編譯方式小程序配置項(xiàng)目路由設(shè)置第一項(xiàng)為首頁窗 1. 配置 配置全解析 project.config.json ( 項(xiàng)目配置文件 ) { // 文件描述 description: 項(xiàng)目...
摘要：配置配置全解析項(xiàng)目配置文件文件描述項(xiàng)目配置文件項(xiàng)目代碼配置是否檢查域名安全性和版本是否將項(xiàng)目的代碼轉(zhuǎn)成是否自動補(bǔ)全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項(xiàng)目名項(xiàng)目配置搜索關(guān)鍵字客服編譯方式小程序配置項(xiàng)目路由設(shè)置第一項(xiàng)為首頁窗 1. 配置 配置全解析 project.config.json ( 項(xiàng)目配置文件 ) { // 文件描述 description: 項(xiàng)目...
摘要：配置配置全解析項(xiàng)目配置文件文件描述項(xiàng)目配置文件項(xiàng)目代碼配置是否檢查域名安全性和版本是否將項(xiàng)目的代碼轉(zhuǎn)成是否自動補(bǔ)全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項(xiàng)目名項(xiàng)目配置搜索關(guān)鍵字客服編譯方式小程序配置項(xiàng)目路由設(shè)置第一項(xiàng)為首頁窗 1. 配置 配置全解析 project.config.json ( 項(xiàng)目配置文件 ) { // 文件描述 description: 項(xiàng)目...
閱讀 632·2023-04-25 21:29
閱讀 1192·2023-04-25 21:27
閱讀 1110·2021-11-25 09:43
閱讀 1172·2021-09-29 09:43
閱讀 3685·2021-09-03 10:30
閱讀 2923·2019-08-29 15:26
閱讀 2882·2019-08-29 12:52
閱讀 1809·2019-08-29 11:10
