Linux 拨号vps windows公众号手机端

微信小程序怎么更新页面中的data

lewis 7年前 (2018-12-02) 阅读数 10 #VPS/云服务器

微信小程序更新页面中data的案例:

在对应的.wxml文件中添加以下代码:

<viewwx:for="{{dataList}}"wx:key='index'class='list-body'>

<view>

<view>编码:{{item.equipCode}}</view>

<view>设备:{{item.equipName}}</view>

<view>测项:{{item.checkItemName}}</view>

</view>

<!--wx:if设置默认选中状态-->

<viewclass='list-button'wx:if='{{item.checkResult=="正常"}}'>

<buttonbindtap='change'data-index='{{index}}'data-status=''class='add'style='color:#fff'>正常</button>

<buttonbindtap='change'data-index='{{index}}'data-status='异常'>异常</button>

</view>

<viewclass='list-button'wx:else>

<buttonbindtap='change'data-index='{{index}}'data-status='正常'>正常</button>

<buttonbindtap='change'data-index='{{index}}'data-status='异常'class='add'style='color:#fff'>异常</button>

</view>

</view>

在对应的.js文件中添加以下代码:

Page({

data:{

dataList:[

{'equipCode':1001,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},

{'equipCode':1002,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},

{'equipCode':1003,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},

{'equipCode':1004,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},

{'equipCode':1005,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'}

]

},

change:function(e){

varchangeData='dataList['+e.target.dataset.index+'].checkResult';

if(e.target.dataset.status=='正常'){

this.setData({

[changeData]:'正常'//修改状态,前端页面数据也会改变

})

}else{

this.setData({

[changeData]:'异常'

})

}

},

})

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门