微信小程序切换

wxml


<!--pages/page-qb/page-qb.wxml-->
<view class="brick">
  <view class="my_brick">我的砖石</view>
  <view class="quantity">{{quantity}}</view>
</view>


<!-- 支付方式 -->
<view class="payment">
  <text class="uploading-name">请选择支付方式</text>
  <view class="navbar">
    <view wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique"
      bindtap="navbarTap">
      <image class="Head_payment" src="{{item.img}}"></image>
      <view class="name_payment">{{item.name}}</view>
    </view>
    <view wx:for="{{icon_right_top}}" class="item {{currentTab==index ? ''  : ''}}" wx:key="unique" bindtap="navbarTap"
      id="right-icon">
      <view class="icon-big">
        <image hidden="{{currentTab!==index}}" class="icon-style" src="{{item.url}}"></image>
      </view>
    </view>
  </view>

</view>

<!-- 充值金额 -->
<view class="money">
  <text class="uploading-name">请选择充值金额</text>
  <view class="sum">
    <view wx:for="{{sum}}" data-idx="{{index}}" class="item {{currentTab_one==index ? 'active' : ''}}" wx:key="unique"
      bindtap="navbarTap_one">
      <view class="money_option1">
        <view class="money_option1_1">
          <text class="money_option_text">{{item.num}}</text>
          <image class="money_option1_img" src="{{item.img}}"></image>
        </view>
        <view class="money_option1_2">{{item.num1}}</view>
      </view>
    </view>
  </view>
</view>
<view class="agreement">

  <view class="container">
    <view class="page-body">
      <view class="page-section">
        <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
          <view class="weui-cell__hd">
            <checkbox value="{{item.value}}" checked="{{item.checked}}" />
          </view>
        </label>
      </view>
    </view>

  </view>
  <view> 已阅读并同意</view>
  <text class="protocol">《用户充值协议》</text>
</view>


wxss


<!--pages/page-qb/page-qb.wxml-->
<view class="brick">
  <view class="my_brick">我的砖石</view>
  <view class="quantity">{{quantity}}</view>
</view>


<!-- 支付方式 -->
<view class="payment">
  <text class="uploading-name">请选择支付方式</text>
  <view class="navbar">
    <view wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique"
      bindtap="navbarTap">
      <image class="Head_payment" src="{{item.img}}"></image>
      <view class="name_payment">{{item.name}}</view>
    </view>
    <view wx:for="{{icon_right_top}}" class="item {{currentTab==index ? ''  : ''}}" wx:key="unique" bindtap="navbarTap"
      id="right-icon">
      <view class="icon-big">
        <image hidden="{{currentTab!==index}}" class="icon-style" src="{{item.url}}"></image>
      </view>
    </view>
  </view>

</view>

<!-- 充值金额 -->
<view class="money">
  <text class="uploading-name">请选择充值金额</text>
  <view class="sum">
    <view wx:for="{{sum}}" data-idx="{{index}}" class="item {{currentTab_one==index ? 'active' : ''}}" wx:key="unique"
      bindtap="navbarTap_one">
      <view class="money_option1">
        <view class="money_option1_1">
          <text class="money_option_text">{{item.num}}</text>
          <image class="money_option1_img" src="{{item.img}}"></image>
        </view>
        <view class="money_option1_2">{{item.num1}}</view>
      </view>
    </view>
  </view>
</view>
<view class="agreement">

  <view class="container">
    <view class="page-body">
      <view class="page-section">
        <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
          <view class="weui-cell__hd">
            <checkbox value="{{item.value}}" checked="{{item.checked}}" />
          </view>
        </label>
      </view>
    </view>

  </view>
  <view> 已阅读并同意</view>
  <text class="protocol">《用户充值协议》</text>
</view>


js

// pages/page-qb/page-qb.js
var url = "https://wxx.zyinc.net/web/uploads/mall1/20201023/images"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    quantity: "20000",
    currentTab: 0,
    swiperCurrent: 0,
    currentTab_one: 0,
    swiperCurrent_one: 0,
    navbar: [{
      img: url + "/icon_zhifubao.png",
      name: '支付宝支付',
    }, {
      img: url + "/icon_weixin.png",

      name: '微信支付'
    }, {
      img: url + "/icon_zhifubao.png",
      name: '当面支付'
    }],
    sum: [{
      img: url + "/icon_zhuanshi1.png",
      num: "600",
      num1: "￥0.01"
    }, {
      img: url + "/icon_zhuanshi1.png",
      num: "3000",
      num1: "￥30.00"
    }, {
      img: url + "/icon_zhuanshi1.png",
      num: "9800",
      num1: "¥98.00"
    }, {
      img: url + "/icon_zhuanshi1.png",
      num: "9800",
      num1: "¥388.00"
    }, {
      img: url + "/icon_zhuanshi1.png",
      num: "58800",
      num1: "¥588.00"
    }],
    items: [{
      value: 'CHN',
      checked: 'true'
    }, ]

  },
  onShareAppMessage() {
    return {
      title: 'checkbox',
      path: 'page/component/pages/checkbox/checkbox'
    }
  },
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  navbarTap_one: function (e) {
    this.setData({
      currentTab_one: e.currentTarget.dataset.idx
    })
  },
  swiperChange: function (e) {
    this.setData({
      swiperCurrent_one: e.detail.current
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items
    })
  }
})


JSON

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "钱包",
  "backgroundColor": "#222222",
  "backgroundTextStyle": "light"
}