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

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

第一种写法：

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>

js代码如下:

Page({data: {array: [{address: "高翔环路与洲海路经贸物流",name: "洲海路服务点",},{address: "秋详路与同顺大道交叉口",name: "芦潮港网点",},{address: "铁峰路269号",name: "浦西铁峰路网点",},{address: "沪太公路潘川路",name: "沪太路宝钱公路网点",}],},radioChange(e) {let that = thislet items = that.data.arrayfor (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})}
})

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;
}

关于storeId的说明：

1.storeId表示被选中元素的值
2.change事件中携带的vue值是被选中元素的值
3.将筛选得到的数据赋值给storeId
最终效果如图所示：

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

微信小程序的选择收货地址、新增地址、地址管理等模块的总结(1)
这几天主要在做公司微信小程序项目2.0版本的一些新增功能,其中就包括把原来的地址等个人固定信息独立成一个模块进行管理(选择收货地址),包括新增地址.地址修改.删除等可以直接选取个人地址而不需要每次都填 ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...
微信小程序日历(酒店入住日期选择)
微信小程序日历(酒店入住日期选择) wxml代码.   <wxs src="../.. ...
小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...
python搭建微信小程序卖货要收费用吗_个人的微信小程序做店铺收费吗?要收多少...
微信小程序受到了广大用户的使用和喜爱,这种不用下载的应用,让人们能更快的开启和关闭应用,不用担心自己的内存不够.那么今天我们来了解下,个人的微信小程序做店铺收费吗?要收多少? 现在许多用了许多小程序了 ...
微信小程序源码推荐这个很实用学习地址
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
location选择收货地址
目录顶部导航条:复用head组件搜索:复用search组件点击定位当前位置其他组件上一个路由是首页上一个路由不是首页虚拟DOM挂载到真实DOM上面后从路由中获取参数fromIndex ...
微信小程序（日历/日期）选择插件
微信小程序日历选择器插件点击日历日期可以获取到年月日 wxml <view class="canlendarBgView"><view class="c ...

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

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

第一种写法：

第二种写法：

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

最新文章

热门文章

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

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

第一种写法：

第二种写法：

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

最新文章

热门文章

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

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