微信小程序 之radio应用实例(选择收货地址)

在地址列表中进行地址选择，且只能选中其中一个地址

第一种写法：

1. wxml代码如下:

<radio-group bindchange="radioChange">
  <label class="list" wx:for="{{array}}" wx:key="id">
    <view class="weui-cell__bd">{{item.address}}</view>
    <view class="weui-cell__ft">
      <radio value="{{item.id}}" checked="{{item.checked}}"/>
    </view>
  </label>
</radio-group>

2. js代码如下:

Page({
  data: {
    array: [
      {
        address: "高翔环路与洲海路经贸物流",
        name: "洲海路服务点",
      },
      {
        address: "秋详路与同顺大道交叉口",
        name: "芦潮港网点",
      },
      {
        address: "铁峰路269号",
        name: "浦西铁峰路网点",
      },
      {
        address: "沪太公路潘川路",
        name: "沪太路宝钱公路网点",
      }
    ],
  },
   radioChange(e) {
    let that = this
    let items = that.data.array
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value === e.detail.value
    }
    that.setData({
      items:items
    })
  },
})

第二种写法：

wxml代码如下:

<radio-group bindchange="radioChange">
  <label class="list" wx:for="{{array}}" wx:key="id">
    <view class="weui-cell__bd">{{item.address}}</view>
    <view class="weui-cell__ft">
      <radio value="{{item.id}}" />
      <text wx:if="{{item.id==storeId}}" class="iconfont icon-dui"></text>
    </view>
  </label>
</radio-group>

js部分代码：

// pages/address/address.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [
      {
        address: "高翔环路与洲海路经贸物流",
        name: "洲海路服务点",
      },
      {
        address: "秋详路与同顺大道交叉口",
        name: "芦潮港网点",
      },
      {
        address: "铁峰路269号",
        name: "浦西铁峰路网点",
      },
      {
        address: "沪太公路潘川路",
        name: "沪太路宝钱公路网点",
      }
    ],
    // 选中的元素
    storeId: '',
  },
  // 地址选择
  radioChange(e) {
    this.setData({
      storeId: e.detail.value
    })
  }
})

3. wxss代码如下:

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20rpx;
  padding: 40rpx 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

radio {
  ?*display: none;*/
}

.iconfont {
  color: #2ea7e0;
}

4. 关于storeId的说明：

   1.storeId表示被选中元素的值
   2.change事件中携带的vue值是被选中元素的值
   3.将筛选得到的数据赋值给storeId

5. 最终效果如图所示：