最近呢剛好做了一個省市聯動的功能,今天看到有人問這個怎麼做,我就把我做的放上來共享一下:
#首先呢,來看看效果,點擊文字'點擊',彈出選擇窗口,點擊取消或確定(取消、確定按鈕在選擇框上邊,截圖有些不清楚),窗口下滑,
做這個我用的是picker-view這個元件,現在來看一看picker-view的屬性:
現在開始寫wxml的程式碼,對了,插一句,我在這裡是把它寫成一個模板的,先看看目錄結構
我們先來看看cascade.wxml裡的程式碼:
<template> <view> <view></view> <view> <view> <text>取消</text> <text>确认</text> </view> <picker-view> <picker-view-column> <view>{{item}}</view> </picker-view-column> <picker-view-column> <view>{{item}}</view> </picker-view-column> <picker-view-column> <view>{{item}}</view> </picker-view-column> </picker-view> </view> </view> </template>
接下來是cascade.wxss的程式碼:
.cascade_box{ font-size:28rpx; width: 100%; height: 0; position: fixed; bottom: 0; left: 0; } .cascade_hei{ width: 100%; height:732rpx; background: #000; opacity: 0.5; } .cascade_find{ width: 100%; height: 500rpx; position: relative; /*bottom: 0; left: 0;*/ background: #fff; } .quxiao,.queren{ display: block; position: absolute; width: 100rpx; height: 80rpx; line-height: 80rpx; /*background: #00f;*/ text-align: center; color: #0f0; } .queren{ right: 0; top: 0; } .cascade_header{ height: 80rpx; width: 100%; margin-bottom: 20rpx; }
好了這裡的範本寫好了,接下來是引用,引用就很簡單了:
首先是las.wxml的引用:
<span style="font-size: 14px;"><import src="../../teml/cascade.wxml"></import> <view bindtap="dianji">点击</view><br><view><br> <text>省:{{jieguo.sheng}}</text><br> <text>市:{{jieguo.shi}}</text><br> <text>区:{{jieguo.qu}}</text><br></view> <template is="cascade" data="{{animationData:animationData,sheng:sheng,shi:shi,qu:qu}}"></template></span>
然後是las.wxss的引用(你沒看錯就是一句):
@import '../../teml/cascade.wxss';
接下來就是JS了:
在這裡要先說一下保存省市的名稱的json文件格式,這個json文件裡又全國的省市名稱(這裡只寫了北京市為例子,這是我請求的資料的例子,你要根據你自己請求的資料來做一些JS的判斷):
{ "regions": [{ "id": 110000, "name": "北京", "regions": [{ "id": 110100, "name": "北京市", "regions": [{ "id": 110101, "name": "东城区" }, { "id": 110102, "name": "西城区" }, { "id": 110103, "name": "崇文区" }, { "id": 110104, "name": "宣武区" }, { "id": 110105, "name": "朝阳区" }, { "id": 110106, "name": "丰台区" }, { "id": 110107, "name": "石景山区" }, { "id": 110108, "name": "海淀区" }, { "id": 110109, "name": "门头沟区" }, { "id": 110111, "name": "房山区" }, { "id": 110112, "name": "通州区" }, { "id": 110113, "name": "顺义区" }, { "id": 110114, "name": "昌平区" }, { "id": 110115, "name": "大兴区" }, { "id": 110116, "name": "怀柔区" }, { "id": 110117, "name": "平谷区" }, { "id": 110228, "name": "密云县" }, { "id": 110229, "name": "延庆县" }] }], "pinyin": "BeiJing", "hot": true, "municipality": true }]}
這裡就是對資料進行操作的las.js了
Page({ data: { sheng: [],//获取到的所有的省 shi: [],//选择的该省的所有市 qu: [],//选择的该市的所有区县 sheng_index:0,//picker-view省项选择的value值 shi_index:0,//picker-view市项选择的value值 qu_index:0,//picker-view区县项选择的value值 shengshi:null,//取到该数据的所有省市区数据 jieguo:{},//最后取到的省市区名字 animationData: {} }, //点击事件,点击弹出选择页 dianji:function(){ //这里写了一个动画,让其高度变为满屏 var animation = wx.createAnimation({ duration: 500, timingFunction: 'ease', }) this.animation = animation animation.height(1332+'rpx').step() this.setData({ animationData:animation.export() }) }, //取消按钮 quxiao:function(){ //这里也是动画,然其高度变为0 var animation = wx.createAnimation({ duration: 500, timingFunction: 'ease', }) this.animation = animation animation.height(0+'rpx').step() this.setData({ animationData:animation.export() }); //取消不传值,这里就把jieguo 的值赋值为{} this.setData({ jieguo:{} }); console.log(this.data.jieguo); }, //确认按钮 queren:function(){ //一样是动画,级联选择页消失,效果和取消一样 var animation = wx.createAnimation({ duration: 500, timingFunction: 'ease', }) this.animation = animation animation.height(0+'rpx').step() this.setData({ animationData:animation.export() });//打印最后选取的结果 console.log(this.data.jieguo); }, //滚动选择的时候触发事件 bindChange: function(e) { //这里是获取picker-view内的picker-view-column 当前选择的是第几项 const val = e.detail.value this.setData({ sheng_index: val[0], shi_index: val[1], qu_index: val[2] }) this.jilian(); console.log(val); console.log(this.data.jieguo); }, //这里是判断省市名称的显示 jilian:function(){ var that=this, shengshi=that.data.shengshi, sheng=[], shi=[], qu=[], qu_index=that.data.qu_index, shi_index=that.data.shi_index, sheng_index=that.data.sheng_index; //遍历所有的省,将省的名字存到sheng这个数组中 for (let i =0; i <p>推薦教學:《<a href="https://www.php.cn/weixin-marketing.html" target="_blank">微信小程式</a>》</p>
以上是微信小程式省市連動功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!