微信小程序動(dòng)態(tài)增加按鈕組件
更新時(shí)間：2018年09月14日 17:04:05 作者：沙振宇
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)增加按鈕組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
這里的微信小程序動(dòng)態(tài)加載是以按鈕為例，主頁面點(diǎn)擊不同的按鈕進(jìn)入不同的子頁面中，根據(jù)主頁面的title來動(dòng)態(tài)加載子頁面按鈕的數(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,
})
}
})
},
})
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
JavaScript中如何判斷一個(gè)變量是數(shù)組Array類型呢？本文向大家提供一個(gè)比較不錯(cuò)的方法，可以說是無懈可擊了2013-09-09
js中onclick和addEventListener的區(qū)別
本文對(duì)javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進(jìn)行講解,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
JS sort方法基于數(shù)組對(duì)象屬性值排序
這篇文章主要介紹了JS sort方法基于數(shù)組對(duì)象屬性值排序,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件
這篇文章主要介紹了JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
axios攔截器機(jī)制的實(shí)現(xiàn)原理詳解
axios 不僅提供了一套跨平臺(tái)請(qǐng)求,另外還提供了“攔截器”這一中間件機(jī)制,方便你在請(qǐng)求之前、響應(yīng)之后做些操作處理,本文給大家詳細(xì)介紹了axios 攔截器機(jī)制是如何實(shí)現(xiàn)的,需要的朋友可以參考下2024-05-05
js?select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼
這篇文章主要介紹了js?select支持手動(dòng)輸入實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-05-05
微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法示例
這篇文章主要介紹了微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法,較為詳細(xì)的分析了預(yù)覽圖片接口及與拍照或手機(jī)相冊(cè)中選圖接口的功能、調(diào)用方法與相關(guān)使用技巧,需要的朋友可以參考下2016-10-10
相信每位PHP程序員都知道，當(dāng)PHP程序出現(xiàn)異常情況，如出現(xiàn)致命錯(cuò)誤、超時(shí)或者不可知的邏輯錯(cuò)誤導(dǎo)致程序中斷，這個(gè)時(shí)候就可以用 register_shutdown_function進(jìn)行異常處理。下面本文給出了詳細(xì)的示例代碼，有需要的朋友們下面來一起看看吧。2016-10-10
json_decode 索引為數(shù)字時(shí)自動(dòng)排序問題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù)，結(jié)果順序不對(duì)，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03