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


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 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python实现字典去除重复的方法示例
2017/07/31 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
幼儿园新学期寄语
2014/01/18 职场文书
个人借条范本
2015/05/25 职场文书
关于教师节的广播稿
2015/08/19 职场文书