微信小程序，模板+按鈕+綁定事件+頁(yè)面跳轉(zhuǎn)

文章類型：微信小程序
文章內(nèi)容：使用模板定義按鈕，使用循環(huán)創(chuàng)建按鈕，并給按鈕綁定事件，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。
注釋很多，應(yīng)該可以看得懂。
請(qǐng)指教，謝謝

.wxml模板內(nèi)容，這里包含了一個(gè)按鈕，還有一個(gè)文本

<template name="daoHangPage"> <button bindtap="{{fun}}" data-gobalpage="{{p}}">{{info}} </button><text>{{descript}}</text> </template> <!-- 參數(shù)fun的作用是為了接收實(shí)現(xiàn)類的參數(shù)，這個(gè)參數(shù)用于綁定點(diǎn)擊響應(yīng)事件。 參數(shù)p的作用是為了接收實(shí)現(xiàn)類遍歷時(shí)個(gè)元素的值，這里是個(gè)元素中的頁(yè)面路徑屬性，它將在goPage中被使用，會(huì)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。 info與descript的作用則只是為了傳入值用來(lái)顯示文本 -->

實(shí)現(xiàn)類的.wxml內(nèi)容

<import src="../template/daoHangTempNo1/naviMain"></import> <text>pages/導(dǎo)航主頁(yè)/</text> <template is="daoHangPage" wx:for="{{test}}" data="{{info:item.info,descript:item.descript,fun:'goPage2',p:item.page}}"></template> <!-- is的作用是使用模板，‘wx:for{{test}}’的作用是：根據(jù)集合test遍歷執(zhí)行，test集合定義在.js文件中。data="{{.....}}"的作用是給模板傳入?yún)?shù)。 -->

實(shí)現(xiàn)模板的.js內(nèi)容

Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: { //test數(shù)組，每個(gè)數(shù)組具有page、info、descript屬性// page屬性各元素本應(yīng)不一致，但我的頁(yè)面很少，便設(shè)為一樣的，用來(lái)測(cè)試是否可用，你可以按照自己的需求更改路徑// page屬性被賦給模板的data-gobalpage形參，然后被goPage使用，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。// info是按鈕文本，descript是顯示文本test:[{page:"../newPage/newPage",info:"第一次實(shí)驗(yàn)頁(yè)面",descript:"從開(kāi)學(xué)開(kāi)始的第一個(gè)頁(yè)面"},{page:"../newPage/newPage",info:"第二次實(shí)驗(yàn)頁(yè)面",descript:"從xxx開(kāi)始的第二個(gè)頁(yè)面"}]},// 函數(shù)通過(guò)event參數(shù)調(diào)用gobalpage參數(shù)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。// 值得注意的是，對(duì)于不同頁(yè)面有不同的跳轉(zhuǎn)方式，不只是“ wx.redirectTo”。goPage2:function(event){console.log(event),wx.redirectTo({ url:event.currentTarget.dataset.gobalpage, //要跳轉(zhuǎn)到的頁(yè)面路徑}) }, })

OK，就這么多了，關(guān)于模板的美化樣式，或者實(shí)現(xiàn)模板類的美化只要按照自己的需求添加樣式就可以了。注意如果要使用模板的樣式，要在實(shí)現(xiàn)類的wxss中導(dǎo)入模板的wxss文件。

關(guān)于這個(gè)東西我試了好長(zhǎng)時(shí)間，我太笨了。
說(shuō)一下猜想：

在按鈕渲染時(shí)就必須要綁定監(jiān)聽(tīng)事件，所以事件的綁定要在模板類中做，但因?yàn)樾枰獏?shù)，所以必須在模板類中定義一個(gè)形參，用來(lái)接收參數(shù)。值得一提的是，雖然事件的綁定在模板類中做，但事件方法卻不在模板的js文件中，而是在實(shí)現(xiàn)類的.js文件中，可見(jiàn)，按鈕實(shí)際上綁定的只是一個(gè)名字，在執(zhí)行時(shí)才根據(jù)名字以及按鈕各信息去找函數(shù)，

總結(jié)

以上是生活随笔為你收集整理的微信小程序，模板+按钮+绑定事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。