微信小程序> 微信小程序动态增加组件(以按钮为例)

微信小程序动态增加组件(以按钮为例)

浏览量:1578 时间: 来源:沙振宇

这里的微信小程序动态加载是以按钮为例,主页面点击不同的按钮进入不同的子页面中,根据主页面的title来动态加载子页面按钮的数量以及值。

效果图:

wxml文件(注意wx:key="item"要写,不然它会有警告):

<!--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>

这里起关键作用的是wx:for,这里是循环。

 

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:'创建新计划--'+options.title});    wx.getSystemInfo({      success: function (res) {        that.setData({          //view          className_height: res.windowHeight / arr.length,          //btn          array: arr,        })      }    })   },})
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎