微信小程序动态增加按钮组件

 更新时间:2018年09月14日 17:04:05   作者:沙振宇  
这篇文章主要为大家详细介绍了微信小程序动态增加按钮组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这里的微信小程序动态加载是以按钮为例,主页面点击不同的按钮进入不同的子页面中,根据主页面的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,
    })
   }
  }) 
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • element-ui dialog弹窗增加全屏功能(推荐)

    element-ui dialog弹窗增加全屏功能(推荐)

    这篇文章主要介绍了element-ui dialog弹窗增加全屏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • 判断一个变量是数组Array类型的方法

    判断一个变量是数组Array类型的方法

    JavaScript中如何判断一个变量是数组Array类型呢?本文向大家提供一个比较不错的方法,可以说是无懈可击了
    2013-09-09
  • js中onclick和addEventListener的区别

    js中onclick和addEventListener的区别

    本文对javascript中onclick事件处理的方法和addEventListener监听器进行讲解,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • JS sort方法基于数组对象属性值排序

    JS sort方法基于数组对象属性值排序

    这篇文章主要介绍了JS sort方法基于数组对象属性值排序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS组件系列之使用HTML标签的data属性初始化JS组件

    JS组件系列之使用HTML标签的data属性初始化JS组件

    这篇文章主要介绍了JS组件系列之使用HTML标签的data属性初始化JS组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • axios拦截器机制的实现原理详解

    axios拦截器机制的实现原理详解

    axios 不仅提供了一套跨平台请求,另外还提供了“拦截器”这一中间件机制,方便你在请求之前、响应之后做些操作处理,本文给大家详细介绍了axios 拦截器机制是如何实现的,需要的朋友可以参考下
    2024-05-05
  • js select支持手动输入功能实现代码

    js select支持手动输入功能实现代码

    这篇文章主要介绍了js select支持手动输入实现代码,需要的朋友可以参考下
    2023-05-05
  • 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    这篇文章主要介绍了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法,较为详细的分析了预览图片接口及与拍照或手机相册中选图接口的功能、调用方法与相关使用技巧,需要的朋友可以参考下
    2016-10-10
  • PHP捕捉异常中断的方法

    PHP捕捉异常中断的方法

    相信每位PHP程序员都知道,当PHP程序出现异常情况,如出现致命错误、超时或者不可知的逻辑错误导致程序中断,这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • json_decode 索引为数字时自动排序问题解决方法

    json_decode 索引为数字时自动排序问题解决方法

    这篇文章主要介绍了使用son_encode 给前端返回数据,结果顺序不对,经debug调试,发现是json_encode 函数的问题,变成 " " + 数字即可,需要的朋友可以参考下
    2020-03-03

最新评论