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


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 相关文章推荐
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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 验证码实例代码
2010/06/01 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python 字符串常用函数详解
2019/09/11 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
什么是设计模式
2012/06/17 面试题
大学共青团员个人自我评价
2014/04/16 职场文书
部门年终奖分配方案
2014/05/07 职场文书
基层党员对照检查材料
2014/08/25 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android