微信小程序動(dòng)態(tài)增加按鈕組件

更新時(shí)間：2018年09月14日 17:04:05 作者：沙振宇

這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)增加按鈕組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

這里的微信小程序動(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)文章

element-ui?dialog彈窗增加全屏功能(推薦)
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
判斷一個(gè)變量是數(shù)組Array類型的方法
JavaScript中如何判斷一個(gè)變量是數(shù)組Array類型呢？本文向大家提供一個(gè)比較不錯(cuò)的方法，可以說(shuō)是無(wú)懈可擊了
2013-09-09
js中onclick和addEventListener的區(qū)別
本文對(duì)javascript中onclick事件處理的方法和addEventListener監(jiān)聽(tīng)器進(jìn)行講解,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
JS sort方法基于數(shù)組對(duì)象屬性值排序
這篇文章主要介紹了JS sort方法基于數(shù)組對(duì)象屬性值排序,文中通過(guò)示例代碼介紹的非常詳細(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捕捉異常中斷的方法
相信每位PHP程序員都知道，當(dāng)PHP程序出現(xiàn)異常情況，如出現(xiàn)致命錯(cuò)誤、超時(shí)或者不可知的邏輯錯(cuò)誤導(dǎo)致程序中斷，這個(gè)時(shí)候就可以用 register_shutdown_function進(jìn)行異常處理。下面本文給出了詳細(xì)的示例代碼，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
json_decode 索引為數(shù)字時(shí)自動(dòng)排序問(wèn)題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù)，結(jié)果順序不對(duì)，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問(wèn)題,變成 " " + 數(shù)字即可,需要的朋友可以參考下
2020-03-03