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


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 相关文章推荐
js验证表单大全
Nov 25 Javascript
什么是JavaScript
Aug 13 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 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
FleaPHP的安全设置方法
2008/09/15 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
初三家长会邀请函
2014/01/18 职场文书
廉洁校园实施方案
2014/05/25 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
三好学生个人总结
2015/02/15 职场文书
学校百日安全活动总结
2015/05/07 职场文书
初中运动会前导词
2015/07/20 职场文书
2016年母亲节广告语
2016/01/28 职场文书