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


Posted in Javascript onSeptember 14, 2018

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

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

Javascript 相关文章推荐
jquery 日期分离成年月日的代码
May 14 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 #Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 #Javascript
Javascript 之封装(Package)
Sep 14 #Javascript
微信小程序框架wepy之动态控制类名
Sep 14 #Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 #Javascript
react 国际化的实现代码示例
Sep 14 #Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 #Javascript
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
js实现表格数据搜索
2020/08/09 Javascript
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
JPA的特点
2014/10/25 面试题
骨干教师考核方案
2014/05/09 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python