微信小程序動(dòng)態(tài)增加按鈕組件
這里的微信小程序動(dòng)態(tài)加載是以按鈕為例,主頁(yè)面點(diǎn)擊不同的按鈕進(jìn)入不同的子頁(yè)面中,根據(jù)主頁(yè)面的title來(lái)動(dòng)態(tài)加載子頁(yè)面按鈕的數(shù)量以及值。
效果圖:
wxml文件(注意wx:key="item"要寫,不然它會(huì)有警告):
<!--pages/plan/plans/plans.wxml--> <view class="className" style="background-color: rgb(225, 218, 211); height:{{className_height}}px" wx:for="{{array}}" wx:key="item"> <button class="items" id="{{stv.id[index]}}">{{item.name}}</button> </view>
這里起關(guān)鍵作用的是wx:for,這里是循環(huán)。
wxss文件:
/* pages/plan/plans/plans.wxss */ .items { background-color: rosybrown; width:60%; }
js文件:
// pages/plan/hot/hot.js Page({ data: { }, onLoad: function (options) { var that = this; var arr = new Array(); if (options.title == "熱門") { var location1 = { name: "1" }; var location2 = { name: "2" }; var location3 = { name: "3" }; var location4 = { name: "4" }; var location5 = { name: "5" }; var location6 = { name: "6" }; arr.push(location1); arr.push(location2); arr.push(location3); arr.push(location4); arr.push(location5); arr.push(location6); console.log("OK"); } else { var location1 = { name: "2" }; var location2 = { name: "4" }; var location3 = { name: "5" }; arr.push(location1); arr.push(location2); arr.push(location3); } wx.setNavigationBarTitle({title:'創(chuàng)建新計(jì)劃--'+options.title}); wx.getSystemInfo({ success: function (res) { that.setData({ //view className_height: res.windowHeight / arr.length, //btn array: arr, }) } }) }, })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS對(duì)象數(shù)組去重的3種方法示例及對(duì)比
這篇文章主要給大家介紹了關(guān)于JS對(duì)象數(shù)組去重的3種方法,三種方法分別包括使用filter和Map、使用reduce以及for循環(huán),文中每個(gè)方法都給出了示例代碼,需要的朋友可以參考下2021-07-07重學(xué)JS之顯示強(qiáng)制類型轉(zhuǎn)換詳解
這篇文章主要給大家介紹了關(guān)于重學(xué)JS之顯示強(qiáng)制類型轉(zhuǎn)換的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Bootstrap3.0學(xué)習(xí)教程之JS折疊插件
這篇文章主要介紹了Bootstrap3.0學(xué)習(xí)教程之JS折疊插件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05微信小程序結(jié)合mock.js實(shí)現(xiàn)后臺(tái)模擬及調(diào)試
這篇文章主要介紹了微信小程序結(jié)合mock.js實(shí)現(xiàn)后臺(tái)模擬及調(diào)試,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03解讀TypeScript與JavaScript的區(qū)別
這篇文章主要介紹了TypeScript與JavaScript的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12JavaScript實(shí)現(xiàn)表單驗(yàn)證案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表單驗(yàn)證案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08