小心小程序中data 初步认识
- 可以用来保存数据。
- 可以用来wxml界面交互的意义。
新建如下page.
在page页面下的有写下如下demo 注意下面代码中ss数组的使用,可以在对象内对其更新使用。
// pages/cart/cart.js
Page({
/**
* 页面的初始数据
*/
data: {
ss: ["Google", "Runoob", "Taobao", "Runoob", "Taobao"]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
在wxml中的代码如下,注意下面的数据绑定,在bock中对ss数组进行循环遍历,在实际项目中ss数组通常为json格式数据可以用来实现数据的的界面交互。
<view class="container cart-container">
<block wx:for="{{ss}}">
<view class="cart-box">
<view class="cart-item">
<view class="cart-item-main">
<view class="cart-item-checkbox" >
<image src="../../imgs/icon/circle@selected.png"></image>
</view>
<view class="cart-item-img">
<image class="good-image" src="../../imgs/icon/cart.png"></image>
</view>
<view class="cart-item-word">
<view class="title-box">
<text class="title">123</text>
<text>¥0.01</text>
</view>
<view class="bottom-box">
<view class="cart-item-counts">
<view class="btns">-</view>
<view class="counts">11</view>
<view class="btns" >+</view>
</view>
<view class="delete" >×</view>
</view>
</view>
</view>
</view>
</view>
<view class="footer-account-box all-accounts-box">
</view>
</block>
<!-- <view wx:else class="no-data">
您还没有添加任何商品
</view>
<loading hidden="{{loadingHidden}}">
加载中...
</loading> -->
</view>
效果如下