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


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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
简单的自定义php模板引擎
2016/08/26 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
php实现图片压缩处理
2020/09/09 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python中的元类编程入门指引
2015/04/15 Python
python实现用户登录系统
2016/05/21 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
基于python 取余问题(%)详解
2020/06/03 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
大学生毕业自我评价范文分享
2013/11/11 职场文书
硕士生工作推荐信
2014/03/07 职场文书
田径运动会广播稿
2015/08/19 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android