文档章节

微信小程序电商系统省市区选择器(二)

秀杰
 秀杰
发布于 2016/12/27 11:47
字数 772
阅读 5.5K
收藏 16

通过本文可以读到:

  1. 省级上下滚动展示scroll-view基本用法
  2. 省市级之间左右滑动展示swiper基本用法
  3. data-index传值方法,wx:for循环语句、wf:if条件判断语句写法

先看下最终效果:

最终效果

一、scroll-view

1. scroll-view组件布局

	    	<scroll-view scroll-y="true" class="viewpager-listview">
		    	<view wx:for="{{province}}" wx:key="index">{{item}}</view>
	    	</scroll-view>

解释:scroll滚动方向项默认值是false,于是将scroll-y设为true

效果如图:

输入图片说明

2.相应的样式表这么写:


/*地址列表ListView容器*/
.viewpager-listview {
	padding-top: 5px;
	height: 220px;
}

/*每行地址item项*/
.viewpager-listview view{
	line-height: 30px;
	padding: 0 10px;
}

说明:height: 220px高度是必选项,否则上下滚动无效

如图:

输入图片说明

文档传送门:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

二、swiper

			<swiper class="swiper-area">
				<swiper-item>
					<scroll-view scroll-y="true" class="viewpager-listview">
						<view wx:for="{{province}}" wx:key="index">{{item}}</view>
					</scroll-view>
				</swiper-item>
			</swiper>

.swiper-area {
	height:220px;
}

说明:上面写的scroll-view包在<swiper-item>标签里就可以了,样式表里定义height即可,indicator-dots="true" autoplay="true" interval="5000" duration="1000"对于做首页轮播广告大图有必要,而这里不需要

文档传送门:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

三、点击省级触发swiper滚动事件

方法是设置swiper的current属性值 <swiper current={{current}}>

绑定事件:<view wx:for="{{province}}" wx:key="index" bindtap="provinceTapped">{{item}}</view>

实现事件:

    provinceTapped: function() {
    	this.setData({
    		current: 1
    	});
    }

如图:

输入图片说明

四、实现市级数据加载

为了记录点击的是哪一个省,设定一个data-index="{{index}}"来标识

<view wx:for="{{province}}" wx:key="index" data-index="{{index}}" bindtap="provinceTapped">{{item}}</view>

在相应的js代码中记录下来该index,并触发省级改变事件this.provinceIndexChanged(index)

    provinceTapped: function(e) {
        // 标识当前点击省份,记录省份名称与主键id都依赖它
    	var index = e.currentTarget.dataset.index;
    	this.setData({
    		current: 1,
    		provinceIndex: index
    	});
    	this.provinceIndexChanged(index);
    },

provinceIndexChanged实现如下:

    provinceIndexChanged: function(index) {
            //provinceObjects是一个leanCloud对象,通过遍历得到纯字符串数组
            // getArea方法是访问网络请求数据,网络访问正常则一个回调function(area){}
	    this.getArea(this.data.provinceObjects[index].get('aid'), function (area) {
	    	var array = [];
			for (var i = 0; i < area.length; i++) {
				array[i] = area[i].get('name');
			}
                        // city就是wxml中渲染要用到的城市数据,cityObjects是LeanCloud对象,用于县级标识取值
			that.setData({
				city: array,
				cityObjects: area
			});
	    });
	},

最后就是将city数据渲染到wxml了

<view wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="cityTapped">{{item}}</view>

效果如下:

输入图片说明

五、高亮列表当前选中省份

目前点击选中的省份没有高亮,不是很醒目,于是加上一个area-selected样式为红色

原来的省份代码修改如下:

							<view wx:for="{{province}}" wx:key="index" data-index="{{index}}" bindtap="provinceTapped">
								<text wx:if="{{index == provinceIndex}}" class="area-selected">{{item}}</text>
								<text wx:else>{{item}}</text>
							</view>

如果数组index下标等于当于provinceIndex,就设定一个area-selected样式。

效果如下:

效果

六、美化标题,由请选择显示为当前省份名称

<text class="viewpager-title">{{provinceName}}</text>

    	this.setData({
    		current: 1,
    		provinceIndex: index,
    		provinceName: this.data.province[index]
    	});

最终效果

源码下载:关注下方的公众号->回复数字1007

对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多作品。

公众号

© 著作权归作者所有

秀杰
粉丝 154
博文 99
码字总数 54752
作品 0
瑞安
iOS工程师
私信 提问
加载中

评论(0)

小程序商城模块 Oejia_weshop v0.1.5 发布,新版的 UI 系列优化

概述 oejia_weshop 是 Odoo 对接微信小程序实现的商城应用。 如果您使用odoo的销售模块,而想要在微信小程序上实现自己的商城卖odoo里的商品,装上 oejia_weshop 模块即可。 如果您想要搭建一...

软践
2019/09/30
1.7K
2
SAAS小程序电商产品设计交流

错过了4年前的公众号开发,还要继续错过火爆的小程序开发吗? 今天活动的主题是:SAAS小程序电商产品如何开发与设计? 前言: 蜗店,是微信第三方开发服务商平台、可以帮助每一个企业解决通用...

半个鼠标
2018/09/03
300
1
SAAS小程序电商产品设计交流

错过了4年前的公众号开发,还要继续错过火爆的小程序开发吗? 今天活动的主题是:SAAS小程序电商产品如何开发与设计? 前言: 蜗店,是微信第三方开发服务商平台、可以帮助每一个企业解决通用...

半个鼠标
2018/09/03
156
1
电商微信小程序所带来的盈利点你抓住了吗?

  电商微信小程序正在不断的深入到各个行业和领域当中,无论是传统电商、垂直电商、实体店等等,都可以通过电商微信小程序来实现更好的引流和盈利。但是面对着电商所带来的盈利点,你都抓住...

公众开发运营官网
2019/10/17
0
0
众邦科技/CRMEB微信小程序商城

CRMEB客户管理+电商管理系统 本项目还在不断开发完善中,如有建议或问题请在这里提出 如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! 帮助文档 公众号和小程序打通版 https://gitee....

众邦科技
2019/01/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kali Linux发布2020.1a版本

Kali Linux发布2020.1a版本 Kali Linux发布2020.1a版本。现在该版本暂时只能从cdimage.kali.org下载。该版本修复了2010.1不联网安装时,没有桌面的bug。2010.1默认的桌面为Xfce。该桌面对应的...

大学霸
19分钟前
46
0
Elasticsearch+Fluentd+Kafka搭建日志系统

前言 由于logstash内存占用较大,灵活性相对没那么好,ELK正在被EFK逐步替代.其中本文所讲的EFK是Elasticsearch+Fluentd+Kfka,实际上K应该是Kibana用于日志的展示,这一块不做演示,本文只讲述数...

四颗咖啡豆
44分钟前
57
0
结果.

app/admin/options.py

MtrS
今天
42
0
00-Java 面试准备

面试之前 面试前准备简历需要注意的几个方面: 写简历、改简历,这个一定要干的。简历有两个作用,一个是吸引别人,能让别人邀请你去面试,这是前提;另一个是引导面试的人,让面试的人问你所...

源程序
今天
54
0
OSChina 周二乱弹 —— 大王(@罗马的王)颜值制霸Osc社区

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :Lunik的单曲《Seeing You Soar》 I hope you’re smiling,When seeing me soar. #今日歌曲推荐# 《Seeing You Soar》- Lunik 手...

小小编辑
今天
1.6K
5

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部