微信小程序中page的 js 和wxml数据绑定

小心小程序中data 初步认识

1.  可以用来保存数据。
   
2. 可以用来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>

效果如下