宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-30

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

效果图:

页面结构文件(注意wx:key='item '要写,不然它会有警告):

!-页面/计划/计划/计划。wxml-view类名' style='底色: RGB(225,218,211);height : { { class name _ height } } px ' wx : for=' { { array } } ' wx : key=' item ' button class=' items ' id=' { { stv。id[index]} ' { { item。名称} }/按钮/视图这里起关键作用的是wx:for,这里是循环。

页面样式表文件:

/*页面/计划/计划/计划。wxss */.项目{背景色: rosybrown宽度:60%;}js文件:

//页面/计划/热门/热门。js页面({ data : } },onLoad:函数(选项){ var那=thisvar arr=新数组();if (options.title=='热门){ var location 1={ name : ' 1 ' };var位置2={ name : ' 2 ' };var位置3={ name : ' 3 ' };var位置4={ name : ' 4 ' };var位置5={ name : ' 5 ' };var位置6={ name : ' 6 ' };由…改编推送(位置1);arr.push(位置2);arr.push(位置3);arr.push(位置4);arr.push(位置5);arr.push(位置6);控制台日志("确定");} else { var位置1={ name : ' 2 ' };var位置2={ name : ' 4 ' };var位置3={ name : ' 5 ' };由…改编推送(位置1);arr.push(位置2);arr.push(位置3);} wx。setnavigationbartitle({ title : '创建新计划-(选项。title });wx。getsystem info({ success : function(RES){ that。setdata({//view className _ height : RES . window height/arr。长度,//btn array: arr,})})}),})以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+