标签分类
技术文章
当前位置:主页 > 计算机编程 > javascript > 微信小程序三级联动选择器使用方法

微信小程序三级联动选择器实例用法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:184

微信小程序三级联动选择器使用方法

这篇文章主要知识点是关于微信小程序三级联动选择器,微信小程序三级联动,微信小程序选择器,微信小程序三级联动选择器使用方法,的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

知晓程序:微信小程序入门指南
  • 类型:小程序开发大小:6.9 MB格式:PDF出版:电子工业出版社作者:知晓程序
立即下载

本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下

效果图

微信小程序三级联动选择器使用方法

实现原理

利用微信小程序的picker组件,其中:
1,普通选择器:mode = selector实现一级选择实例;
2,省市区选择器:mode = region实现省市区三级联动;
3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法。

WXML

<view class="tui-picker-content">
 <view class="tui-picker-name">一级选择实例</view>
 <picker bindchange="changeCountry" value="{{countryIndex}}" range="{{countryList}}">
 <view class="tui-picker-detail">{{countryList[countryIndex]}}</view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">省市区三级联动选择</view>
 <picker bindchange="changeRegin" mode = "region" value="{{region}}">
 <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">自定义二级联动选择</view>
 <picker bindchange="changeMultiPicker" mode = "multiSelector" value="{{multiIndex}}" range="{{multiArray}}">
 <view class="tui-picker-detail">
 {{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}}
 </view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">自定义三级联动选择</view>
 <picker bindchange="changeMultiPicker3" mode = "multiSelector" value="{{multiIndex3}}" range="{{multiArray3}}">
 <view class="tui-picker-detail">
 {{multiArray3[0][multiIndex3[0]]}} * {{multiArray3[1][multiIndex3[1]]}} * {{multiArray3[2][multiIndex3[2]]}} = {{multiArray3[0][multiIndex3[0]] * multiArray3[1][multiIndex3[1]] * multiArray3[2][multiIndex3[2]]}}
 </view>
 </picker>
</view>

WXSS

page{background-color: #efeff4;}
.tui-picker-content{
 padding: 30rpx;
 text-align: center;
}
.tui-picker-name{
 height: 80rpx;
 line-height: 80rpx;
}
.tui-picker-detail{
 height: 80rpx;
 line-height: 80rpx;
 background-color: #fff;
 font-size: 35rpx;
 padding: 0 10px;
 overflow: hidden;
}

JS

Page({
 data: {
 // 普通选择器列表设置,及初始化
 countryList: ['中国','美国','英国','日本','韩国','巴西','德国'],
 countryIndex: 6,
 // 省市区三级联动初始化
 region: ["四川省", "广元市", "苍溪县"],
 // 多列选择器(二级联动)列表设置,及初始化
 multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],
 multiIndex: [3,5],
 // 多列选择器(三级联动)列表设置,及初始化
 multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],
 multiIndex3: [3, 5, 4]
 },
 // 选择国家函数
 changeCountry(e){
 this.setData({ countryIndex: e.detail.value});
 },
 // 选择省市区函数
 changeRegin(e){
 this.setData({ region: e.detail.value });
 },
 // 选择二级联动
 changeMultiPicker(e) {
 this.setData({multiIndex: e.detail.value})
 },
 // 选择三级联动
 changeMultiPicker3(e) {
 this.setData({ multiIndex3: e.detail.value })
 }
})

总结

1、由于微信小程序的picker组件只提供单独时间选择器和日期选择器,在实际开发中,我们可能需要同时选择日期和时间,组件不够全面,所以在做日期选择器时,需要注意;
2、解决日期和时间选择器结合的方法,利用多列选择器实现;
3、由于多列选择器的数据采用的是二维数组,所以不能直接实现联动效果,需要对数据判断处理。

合理的利用多列选择器,picker组件提供的其他四种选择器都能实现!

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到详解vue axios封装请求状态、 vue项目中使用md5加密以及、 解决axios.interceptors.respon、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:echarts中箱线图的分析与绘制实例分享

下一篇:JavaScript标准对象知识点总结

展开 +

收起 -

学习笔记
网友NO.976846

微信小程序三级联动地址选择器的实例代码

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现。省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下。照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实现之前,我们需要先来介绍下这两个组件,picker这个组件在前面的文章有简单介绍过,它是从底部弹起的滚动选择器,可以通过设置type的值来实现日期选择,时间选择以及普通的选择器,如果我们想实现上图三级联动地址选择效果,发现实现起来很困难,应该说是不能实现,因为picker普通选择器是只能有一列,如果想这实现三列的效果就需要另辟蹊径了。 既然是另辟蹊径,自然就会想到picker-view,该组件是一个嵌入页面的滚动选择器,该组件中可以放置多个picker-view-column,并且只能放置picker-view-column,其它组件是不会显示的,每一个picker-view-column就是一列。 picker-view有几个重要的属性,value是一个数组……

网友NO.884890

微信小程序实现省市区三级地址选择

国际惯例先上效果图: 省市区三级联动,选择省自动刷新市,选择市自动刷新区,点击取消自动返回上一级重新选择,点击确定,保存地址。 数据库 这份数据库是某天在网上逛到的,当时未记录出处,直接贴出给读者使用,实在不妥,此处仅贴出表结构,方便大家交流学习。如有读者了解此份数据出处,烦请留言,谢谢! 数据表结构如下: 部分使用到的字段信息: id:唯一标识每一个数据 name:地区名 parent_id:上级地区的id,若parent_id = 0 ,表示无上级信息,当前即为最高行政区。 extra:主要标识少数民族自治州或者自治县的信息,如:巴音郭楞 蒙古 自治州,此处存储 蒙古 例: suffix:行政级别 市 省 县 区等 部分地区数据信息如下: 后台 后台仅需提供一个接口,根据parent_id,查询地区信息 此处使用的后台是SSM框架,贴出主要接口、sql 1.与小程序交互接口 @RequestMapping(value = "/getArea", method = RequestMethod.POST) private @ResponseBody ListDistrict getArea(HttpServletRequest request) { int parentId = Integer.parseInt(request.getParameter("parentId")); logger.info("getArea"); ListDistrict list = new ArrayListDistrict(); try { list = districtService.getAreas(parentId); } catch (Exception e) { } return list; } 2.查询sql select id="getAreas" resultType="District" !-- 具体的sql -- SELECT id,concat(name,extra,suffix) as name,……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明