小程序js文件改变参数并在视图上及时更新

发布时间：2023-08-15 13:32:27 作者：♀泽龍 阅读量：3875

小程序js文件改变参数并在视图上及时更新的开发步骤：

969f318acf7323967d6cd2beff39423c.jpg (13.59 KB, 下载次数: 6)

下载附件

小程序js文件改变参数并在视图上及时更新

1 小时前 上传

一、简单参数

XX.wxml

 

1. <view>
2. <text>{{str}}</text>
3. </view>
4. <button bindtap="change">改变</button>
5. XX.js
6.  
7. Page({
8. data: {
9. str:'早上好'
10. },
11. change: function() {
12. this.setData({
13. str:"晚上好"
14. })
15. }
16. })

二、已知下标的数组

XX.wxml

 

1. <view>
2. <text>{{array[0].text}}</text>
3. </view>
4. <button bindtap="change">改变</button>
5. XX.js
6.  
7. Page({
8. data: {
9. array: [{text: '早上好'}],
10. },
11. change: function() {
12. this.setData({
13. 'array[0].text':'晚上好'
14. })
15. }
16. })

三、动态下标的数组

XX.wxml

 

1. <view>
2. <block wx:for="array" wx:key="index">
3. <text>{{item.text}}</text>
4. <button bindtap="change" data-index="index">改变</button>
5. </block>
6. </view>
7. <button bindtap="change">改变</button>

XX.js

 

1. Page({
2. data:{
3. array:[
4. {text:'1111'},
5. {text:'2222'},
6. {text:'3333'}
7. ]
8. },
9. change:function(e){
10. let param = {};
11. let string = "array["+e.target.dataset.index+"].text;
12. param[string] = '0000';
13. this.setData(param);
14. }
15. })

希望对大家有所帮助哦

我要评论

置顶通知！发帖请务必遵守法律法规

微信支付下载对账单开发CloudPay.downloadBill()

wx.navigateBack(OBJECT),小程序关闭当前页面返回上一页面（1）

如何制作微信小游戏

微信支付查询退款开发CloudPay.queryRefund()

微信小程序尺寸及外边距设置调整技巧

考古APP开发 感受历史的魅力考古APP开发

安全教育app开发解决方案

门店小程序类目资质表

广州APP开发企业APP制作公司

一招告诉你小程序码怎么生成？

一文告诉你为什么鲜花店老板主动要做小程序?

专业app开发公司,安卓手机,iOS开发公司

手机APP和二维码有什么联系呢？

广州APP制作公司的兴起

HTML5与APP开发“旧”技术 本是同根生

哪款监控流量统计的软件比较靠谱呢？

旅游APP具备哪些功能呢？

本地头条新闻APP开发:不用编程,让你一个人顶一个电视台

广州APP开发未来的发展趋势

剖析APP开发跨平台与非跨平台对比

税务app开发 办税无压力税务app开发

微信小程序的制作流程

「体育行业app开发」体育行业app开发谁好？案例跟商业模式