微信小程序，模板+按鈕+綁定事件+頁面跳轉

文章類型：微信小程序
文章內容：使用模板定義按鈕，使用循環創建按鈕，并給按鈕綁定事件，實現頁面跳轉。
注釋很多，應該可以看得懂。
請指教，謝謝

.wxml模板內容，這里包含了一個按鈕，還有一個文本

<template name="daoHangPage"> <button bindtap="{{fun}}" data-gobalpage="{{p}}">{{info}} </button><text>{{descript}}</text> </template> <!-- 參數fun的作用是為了接收實現類的參數，這個參數用于綁定點擊響應事件。 參數p的作用是為了接收實現類遍歷時個元素的值，這里是個元素中的頁面路徑屬性，它將在goPage中被使用，會實現頁面跳轉。 info與descript的作用則只是為了傳入值用來顯示文本 -->

實現類的.wxml內容

<import src="../template/daoHangTempNo1/naviMain"></import> <text>pages/導航主頁/</text> <template is="daoHangPage" wx:for="{{test}}" data="{{info:item.info,descript:item.descript,fun:'goPage2',p:item.page}}"></template> <!-- is的作用是使用模板，‘wx:for{{test}}’的作用是：根據集合test遍歷執行，test集合定義在.js文件中。data="{{.....}}"的作用是給模板傳入參數。 -->

實現模板的.js內容

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

OK，就這么多了，關于模板的美化樣式，或者實現模板類的美化只要按照自己的需求添加樣式就可以了。注意如果要使用模板的樣式，要在實現類的wxss中導入模板的wxss文件。

關于這個東西我試了好長時間，我太笨了。
說一下猜想：

在按鈕渲染時就必須要綁定監聽事件，所以事件的綁定要在模板類中做，但因為需要參數，所以必須在模板類中定義一個形參，用來接收參數。值得一提的是，雖然事件的綁定在模板類中做，但事件方法卻不在模板的js文件中，而是在實現類的.js文件中，可見，按鈕實際上綁定的只是一個名字，在執行時才根據名字以及按鈕各信息去找函數，

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。