微信小程序 省市区选择器实例详解(附源码下载)


Posted in Javascript onJanuary 05, 2017

微信小程序 省市区选择器:

      最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下。

一、区域间手势滑动切换,标题栏高亮随之切换

思路是:拿当前的current来决定高亮样式

1.监听swiper滚动到的位置:

<swiper class="swiper-area" current="{{current}}" bindchange="currentChanged">

currentChanged: function (e) {
  // swiper滚动使得current值被动变化,用于高亮标记
    var current = e.detail.current;
    this.setData({
      current: current
    });
  }

2.布局文件中做条件判断,是否加上高亮样式,其中area-selected是目标样式,color: red;

<text class="viewpager-title">
        <text wx:if="{{current == 0}}" class="area-selected">{{provinceName}}</text>
        <text wx:else>{{provinceName}}</text>
      </text>
      <text class="viewpager-title">
        <text wx:if="{{current == 1}}" class="area-selected">{{cityName}}</text>
        <text wx:else>{{cityName}}</text>
      </text>
      <text class="viewpager-title">
        <text wx:if="{{current == 2}}" class="area-selected">{{regionName}}</text>
        <text wx:else>{{regionName}}</text>
      </text>
      <text class="viewpager-title">
        <text wx:if="{{current == 3}}" class="area-selected">{{townName}}</text>
        <text wx:else>{{townName}}</text>
      </text>

3.点击上级时为下一级赋予“请选择”字样

provinceTapped: function(e) {
...
      that.setData({
        cityName: '请选择',
        city: array,
        cityObjects: area
      });
...
}

其他级别以其类推。

效果如下:

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
微信小程序 Template详解及简单实例
Jan 05 #Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 #Javascript
微信小程序 数组中的push与concat的区别
Jan 05 #Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 #Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 #Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 #Javascript
jQuery电话号码验证实例
Jan 05 #Javascript
You might like
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP分页类集锦
2014/11/18 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
js实现消息滚动效果
2017/01/18 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python SVM 线性分类模型的实现
2019/07/19 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
幼儿教育感言
2014/02/05 职场文书
工程建设实施方案
2014/03/14 职场文书
团队拓展活动方案
2014/08/28 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
高三化学教学反思
2016/02/22 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
css3 选择器
2022/05/11 HTML / CSS