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


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 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
vue插件实现v-model功能
Sep 10 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
php中file_exists函数使用详解
2015/05/08 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python中global与nonlocal比较
2014/11/21 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python 打印中文字符的三种方法
2018/08/14 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python动态文本进度条的实例代码
2020/01/22 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers