广告
返回顶部
首页 > 资讯 > 精选 >微信小程序怎么更新页面中的data
  • 661
分享到

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

2024-04-02 19:04:59 661人浏览 薄情痞子
摘要

微信小程序更新页面中data的案例:在对应的.wxml文件中添加以下代码:<view wx:for="{{dataList}}" wx:key='index' clas

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

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

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

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

  <view>

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

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

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

  </view>

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

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

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

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

  </view>

  <view class='list-button' wx:else>

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

    <button bindtap='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) {

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

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

          this.setData({

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

          })

        } else {

          this.setData({

            [changeData]: '异常'

          })

        }

    },

})

--结束END--

本文标题: 微信小程序怎么更新页面中的data

本文链接: https://www.lsjlt.com/news/116450.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序怎么更新页面中的data
    微信小程序更新页面中data的案例:在对应的.wxml文件中添加以下代码:<view wx:for="{{dataList}}" wx:key='index' clas...
    99+
    2022-10-17
  • 微信小程序怎么动态更新页面
    微信小程序动态更新页面的案例:wxml代码: <swiper indicator-dots="{{true}}"  current="{{currentindex}...
    99+
    2022-10-09
  • 微信小程序页面怎么实时刷新
    微信小程序页面实时刷新的案例:在wxml文件中插入view标签并绑定变量。<view class="num"><view>{{num}}</view></view>...
    99+
    2022-10-16
  • 微信小程序怎么设置页面自动刷新
    微信小程序设置页面自动刷新的方法:打开微信小程序开发工具,新建项目。在wxml文件中插入view标签并绑定变量,代码:<view class="num">  <view&g...
    99+
    2022-10-06
  • 微信小程序页面怎么配置
    这篇“微信小程序页面怎么配置”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序页面怎么配置”文章吧。一、小程序配置1、...
    99+
    2023-06-08
  • 微信小程序怎么注册页面
    本篇内容介绍了“微信小程序怎么注册页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!注册过小程序之后,接下来注册页面。代码说明//index...
    99+
    2023-06-19
  • 微信小程序open-data怎么用
    本文小编为大家详细介绍“微信小程序open-data怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序open-data怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。open-data基础库 ...
    99+
    2023-06-26
  • 微信小程序页面大小怎么调整
    微信小程序的页面大小可以通过修改页面的样式来进行调整。1. 打开小程序页面的 `.json` 文件,在 `"navigationBa...
    99+
    2023-08-15
    微信小程序
  • 微信小程序怎么设置首页页面
    微信小程序设置首页页面的方法:在app.json文件中,找到pages数组,设置在第一个的页面就是默认启动页面,因此需要调整你当前开发的页面顺序。在提交正式版本的时候,“配置功能页面”的一步,在功能页面一栏里,选择需要设置为首页页面。在小程...
    99+
    2022-10-17
  • 微信小程序如何重新渲染页面
    在小程序添加点击按钮实现重新渲染页面index.wxml文件<button bindtap="onrefresh">重新渲染</button>  //添加一个点击重新...
    99+
    2022-10-13
  • 微信小程序delta后如何刷新页面
    微信小程序delta后刷新页面的方法:方法一:this.onLoad(),在delta操作函数中调用this.onLoad()或that.onLoad()方法二:this.onReady() 或者 this.onShow()。在delta操...
    99+
    2022-10-15
  • 微信小程序如何重新加载页面
    微信小程序有提供一个下拉刷新的功能,操作步骤如下:打开小程序。点击右上角的“···”。会弹出一些功能信息,选择“刷新”即可。...
    99+
    2022-10-09
  • 微信小程序子页面的tabbar怎么改
    改微信小程序子页面的tabbar的案例:可在app.json中写的tabList中修改,例如在app.json中找到tabbar,设置tabbar的列表,也就是底部的菜单栏。"list":[  &nb...
    99+
    2022-10-21
  • 微信小程序item怎么页面传参
    微信小程序item页面传参的案例:A页面data-id="{{item.id}}"为标记列表的下标,item.id的来源与wx:for="{{ components }}"的列表渲染bindtap=&...
    99+
    2022-10-19
  • 微信小程序页面文字怎么改
    一、修改页面中的文字信息进入微信开发者工具,打开小程序项目文件,在项目文件中,依次查找:index/index.wxml文件,打开;index.wxml文件打开后,修改页面中标签的文字信息,即可;二、修改页面标题文字进入微信开发者工具,打开...
    99+
    2022-10-18
  • 微信小程序页面中的view怎么调用js
    微信小程序页面中的view调用js的方法:通过引入wxs模块实现效果,新建`filter.wxs`文件,代码:var filters = {      ...
    99+
    2022-10-21
  • 微信小程序怎么在页面中设置tabbar
    在微信小程序中给页面设置底部导航tabBar的方法首先,进入微信开发者工具,打开小程序文件目录;在文件目录中,依次查找:utils/app.json文件;app.json文件查找到后,在文件中添加以下代码即可;{"tabBar": {"li...
    99+
    2022-10-13
  • 微信小程序面试题大全(持续更新)
    1.请谈谈微信小程序主要目录和文件的作用? project.config.json:项目配置文件,用的最多的就是配置是否开启https校验App.js:设置一些全局的基础数据等App.json:底部tab,标题栏和路由等设置App.wxss...
    99+
    2023-08-19
    微信小程序 小程序 前端 bug 数据挖掘
  • 微信小程序里面怎么嵌套html页面
    使用web-view标签实现在小程序中嵌入html网页如:<web-view src="https://www.baidu.com"></web-view>使用微信小程序正式号时,需要将...
    99+
    2022-10-12
  • 微信小程序的页面标题怎么设置
    设置微信小程序页面标题的方法:方法1:修改page.json文件,代码:{"navigationBarTitleText": "我的标题"}方法2:使用JS修改,代码:wx.setNavig...
    99+
    2022-10-11
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作