菜单

小程序学习笔记www.2138.com:

2020年3月21日 - www.2138.com
小程序学习笔记www.2138.com:

微信小程序点击控件改正样式实例详细明白

Wechat小程序 setData() 使用:Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层,同期纠正对应的 this.data
的值。

参数表达:

www.2138.com 1

Object 以 key: value 的款型表示,将 this.data 中的 key 对应的值改形成value。

此中 key
能够以数据路线的款型提交,协助更改数组中的某一项或对象的某部属性,如
array[2].message,a.b.c.d,而且无需在 this.data 中先行定义。

注意:

  1. 平素修改this.data,而不调用this.setData(卡塔尔(قطر‎,是力不能够及纠正最近页面包车型客车事态的,会招致数据不一致等
  2. 仅援救能够JSON化的数目
  3. 单次设置的数额不可能逾越1024KB,尽量幸免壹次设置过多的多寡
  4. 实际不是把data中的任何一项的value设为undefined,不然这一项将无法被安装,只怕会有地下的标题

代码示例:

Page({ /** * 页面的初始数据 */ data: { value:"初始值" //定义一个变量value,赋值为:“初始化” }, /** * 生命周期函数--监听页面加载 */ onLoad: function  { } })

在页面中展现:

www.2138.com 220180810161655804.png

小程序学习笔记www.2138.com:。在onLoad()函数中调用setData()

 onReady: function () { this.setData({ value:"调用setData()修改后的值" }) },123456

双重运维:

www.2138.com 320180810162025438.png

代码:

wx:wx.request({ url: 'http://180.169.225.27:7011/ibeacon/mobile.asmx/getRequest', data:{userid:this.data.username}, header: { 'content-type': 'application/json' }, method: 'POST', dataType: 'json', success: function { console.log(JSON.parse(res.data.d)); var value = JSON.parse(res.data.d); this.setData({ postData:value }) }, fail: function {}, complete: function {}, });

www.2138.com 420180810162621624.png

因为此处的this是对峙于wx:request(State of Qatar的脚下指标,我们能够如此解决:因为这边的wx:rewuest(卡塔尔(قطر‎是在页面加载时调用,所以咱们得以在onLoad()中定义一个变量that
,将this赋值给that,那么那时的that代表绝对于onLoad()的当下指标,然后在success回调函数中央司法机关接行使that.setData(卡塔尔国就可以。

完全代码如下:

//js代码onLoad: function  { console.log; var that = this; var userid = options.userid; that.setData({ username: userid }) // this.data.username = JSON.stringify; console.log(this.data.username); wx:wx.request({ url: 'http://180.169.225.27:7011/ibeacon/mobile.asmx/getRequest', data:{userid:this.data.username}, header: { 'content-type': 'application/json' }, method: 'POST', dataType: 'json', success: function { console.log(JSON.parse(res.data.d)); var value = JSON.parse(res.data.d); that.setData({ postData:value }) }, fail: function {}, complete: function {}, }); }//wxml代码<view wx:for="{{postData}}">posno:{{item.posno}},TradeTime:{{item.TradeTime}}</view>

常规获取到服务器重返的数码:

www.2138.com 52018081016360455.png

明日要在Wechat小程序中得以达成点击控件改革样式,如下:

若果在onReady()函数中调用setData()方法,那么通过那么些主意设置的值只可以刷新一遍,若须要再行刷新,须要清除缓存。

Wechat小程序中不协助直接操作dom,要达成这种效应,咱们须要经过设置data,然后使用数据和分界面包车型客车双向绑定来贯彻它。

踩坑

明天踩了南生围,坑里还都以碎瓶渣子。。

  1. 比方说你在main.js里面有这一个变量。想校订有个别值。

    data: {main_view_bgcolor: "",border: "",}
    

    改良章程有三种,一是直接用“=”赋值,这种是足以校订,並且你把更正今后的值打字与印刷出来能够见见真的改革了,不过不引入应用那样的不二等秘书技。

    因为,平常大家想纠正data里面包车型地铁值,往往都以因为这个数据都在main.wxml中绑定了,可以兑现动态改善并实时刷新彰显。刚刚这种办法轻松发生多少被改造只是页面未有变动。

    就此说一下上面这种办法:

    在您绑定的自定义函数(往往都以绑定的点击事件)里面,

    this.setData({border:"aa"//这个border跟上面data里面的border是对应的。})
    

    这种措施,点击之后触发事件,试行函数,更新数据,同期能够实时更新渲染界面。

     data: { main_view_bgcolor: "", border: "", isChecked: [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true]}
    

    如上,假若本身想动态改过isChecked里面钦定有个别下标的值咋做?

    上边作者来讲怎么动态改良一个目的的某成分的值。上面那几个是索引下标,等会还应该有个key-value的事例。

    代码:

    click: function  { var id = e.target.id//根据点击不同的view获取对应的id值 var str = "isChecked[" + id + "]"//重点在这里,组合出一个字符串 this.setData({ [str]: false//用中括号把str括起来即可 })}
    

    看注释。点击->触发对应事件->来到click函数这里,依照点击的view获取相应的id,改良钦点下标的isChecked。

    地方这些isChecked的目录是从0到n的,即能够因此isChecked[0]、isChecked[1]来拜候。能够在操作的经过中打字与印刷日志看一下数据类型。

    啊,对了,在wxml中要是要绑定isChecked兰秋素的值,能够如此:

    <view bindtap=’click’ bindlongpress=’cancelclick’ id=’2′
    bindtap=’click’></view>

    不要理会那一个三目运算,反正相似于js中访谈格局,也是isChecked[index]。同理,下边包车型地铁key-value类型的就可以透过isChecked[index].key来绑定数据了。

    下面是key-value类型的:

    data: { main_view_bgcolor: "", border: "", isChecked: [ { key: true }, { key: true }, { key: true } ]}
    

    直接写操作方法了(因为就跟上边只有一丝丝的区分):

     var str = "isChecked[" + id + "].key" this.setData({ [str]: false })
    

先是步:在wxss中定义被点击和未被点击的体裁,如下:

.service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff; } .service_selection .normal{ border: none; color: #333; background: #F0F1EC; } 

第二步:在js文件中的data中装置一个flag,叫她isChecked,默许isChecked==false。如下:

data: { isChecked: false } 

其三步:在wxml文件中绑定点击事件,

在js文件中贯彻那几个主意,并另他点击后装置isChecked==true。如下:

serviceSelection(){ this.setData } 

第四步:依旧是在wxml文件中开展多少绑定:

{{isChecked?'is_checked':'normal'}}" 

那是三个三目运算符,当isChecked==true时,在class加上is_checked的样式,为flase时选用normal的体制。那一点的完毕形似php调节样式类名的语法。

多谢阅读,希望能扶植到我们,多谢我们对本站的支撑!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图