region-picker.wxml

<view class="mask-layer" hidden="{{isShowToast}}"></view>
<view class="goodsdetail" hidden="{{isShowToast}}"><view class="seclection-title">请选择所在地区</view><image class="close" src="../../img/icon/icon-cancel.png" bindtap="hideGoodsDetail"></image><view class="state"><view>中国大陆</view><view class="state-active"></view></view><view class="hot-city" hidden="{{!isClick}}"><view class="hot-title">热门城市</view><view class="hot-city-list"><view wx:for="{{hotcityList}}" wx:key='item' data-item='{{item.city}}' data-index='{{item.id}}' bindtap='provinceChange'>{{item.city}}</view></view></view><!-- <view class='goodsdetail-title'></view> --><view class='goodsdetail-top' hidden="{{isClick}}"><view wx:for='{{nameArr}}' wx:key="index" class='{{currentTab == index ? "goodsdetail-top-l-o":"goodsdetail-top-l"}}' style='{{item == "" ? "display: none;":""}}' bindtap="navbarTap" data-index='{{index}}'><view>{{item}}</view></view></view><swiper class="swiper-box"><swiper-item wx:if='{{currentTab == 0}}' catchtouchmove='catchTouchMove'><scroll-view scroll-y class="swiper-box-scr"><view class='swiper-box-item {{nameArr[0] == item ? "active":""}}' wx:for='{{provinceArr}}' wx:key='item' data-item='{{item}}' data-index='{{index}}' bindtap='provinceChange'><block wx:if="{{nameArr[0] == item}}"><image class="select" src="{{nameArr[0] == item? '../../img/icon/icon-select.png': ''}}"></image></block><view>{{item}}</view></view></scroll-view></swiper-item><swiper-item wx:if='{{currentTab == 1}}' catchtouchmove='catchTouchMove'><scroll-view scroll-y class="swiper-box-scr"><view class='swiper-box-item {{nameArr[1] == item ? "active":""}}' wx:for='{{cityArr}}' wx:key='item' data-item='{{item}}' data-index='{{index}}' bindtap='cityChange'><block wx:if="{{nameArr[1] == item}}"><image class="select" src="{{nameArr[1] == item? '../../img/icon/icon-select.png': ''}}"></image></block><view>{{item}}</view></view></scroll-view></swiper-item><swiper-item wx:if='{{currentTab == 2}}' catchtouchmove='catchTouchMove'><scroll-view scroll-y class="swiper-box-scr"><view class='swiper-box-item {{nameArr[2] == item ? "active":""}}' wx:for='{{countryArr}}' wx:key='item' data-item='{{item}}' data-index='{{index}}' bindtap='districtChange'><block wx:if="{{nameArr[2] == item}}"><image class="select" src="{{nameArr[2] == item? '../../img/icon/icon-select.png': ''}}"></image></block><view>{{item}}</view></view></scroll-view></swiper-item></swiper>
</view>

region-picker.wxss

/*弹窗*/.goodsdetail {position: fixed;left: 5rpx;bottom: 10rpx;width: 740rpx;height: 1000rpx;background: #fff;z-index: 99;overflow: hidden;border-radius: 20rpx;
}.goodsdetail-top {width: 750rpx;box-sizing: border-box;display: flex;position: relative;margin: 81rpx 34rpx;
}.goodsdetail-top-l {box-sizing: border-box;font-size: 28rpx;font-weight: bold;font-family: "PingFang-SC-Bold";color: #f73c41;margin-right: 74rpx;
}.goodsdetail-top-l-o {box-sizing: border-box;font-size: 28rpx;font-weight: bold;font-family: "PingFang-SC-Bold";margin-right: 74rpx;
}.goodsdetail-top-c {height: 80rpx;padding: 0 20rpx 0 20rpx;line-height: 80rpx;box-sizing: border-box;font-size: 26rpx;
}.goodsdetail-top-c-o {height: 80rpx;padding: 0 20rpx 0 20rpx;line-height: 80rpx;box-sizing: border-box;font-size: 26rpx;border-bottom: 1rpx solid #e22e1f;
}.goodsdetail-top-r {height: 80rpx;padding: 0 20rpx 0 20rpx;line-height: 80rpx;box-sizing: border-box;font-size: 26rpx;
}.goodsdetail-top-r-o {height: 80rpx;padding: 0 20rpx 0 20rpx;line-height: 80rpx;box-sizing: border-box;font-size: 26rpx;border-bottom: 1rpx solid #e22e1f;
}.goodsdetail-top-cancel {position: absolute;right: 0;top: 0;color: #aaa;height: 80rpx;padding: 0 40rpx 0 20rpx;line-height: 80rpx;box-sizing: border-box;font-size: 26rpx;
}.swiper-box {width: 740rpx;height: 620rpx;box-sizing: border-box;
}.swiper-box-scr {width: 740rpx;height: 620rpx;box-sizing: border-box;
}.swiper-box-item {height: 85rpx;line-height: 85rpx;font-size: 28rpx;font-weight: Medium;font-family: "PingFang-SC-Medium";border-bottom: 1rpx solid #EEEEEE;box-sizing: border-box;display: flex;position: relative;margin: 0 30rpx;padding: 0 5rpx;align-items: center;
}.seclection-title {text-align: center;margin-top: 40rpx; font-size: 32rpx;font-weight: bold;font-family: "PingFang-SC-Bold";color: #000000;margin-bottom: 83rpx;
}
.state {font-size: 30rpx;color: #f73c41;font-weight: bold;font-family: "PingFang-SC-Bold";margin-left: 35rpx;margin-right: 35rpx;
}
.state view:nth-child(1) {margin-bottom: 11rpx;
}
.close {width: 32rpx;height: 31rpx;position: absolute;right: 39rpx;top: 41rpx;
}
.state-active {height: 6rpx;width: 20.4rpx;background: #f73c41;border-radius: 2.5rpx;margin-left: 48rpx;
}
.hot-city {margin: 68rpx 35rpx 64rpx;
}
.hot-city .hot-title {font-size: 28rpx;color: #999999;
}
.hot-city .hot-city-list {display: flex;font-size: 28rpx;color: #000000; justify-content: space-between;margin-top: 42rpx;
}
.hot-city view:nth-child(2) view:nth-child(1) {margin-left: 28rpx;
}
.hot-city view:nth-child(2) view:last-child {margin-right: 28rpx;
}
.active {font-size: 28rpx;font-weight: bold;font-family: "PingFang-SC-Bold";color: #f73c41;
}
.mask-layer {width: 100%;height: 100%;background: #000;opacity: 0.5;position: fixed;z-index: 99;top: 0;left: 0;overflow: hidden;
}
.swiper-box-item image {width: 35rpx;height: 27rpx;margin-right: 22rpx;
}

region-picker.js

var city = require('../../utils/city.js')
Component({/*** 组件的属性列表*/properties: {locationArr: {type: Array,value: '',observer: function(newVal, oldVal) {console.log('我是传递进入的省', newVal)}},},/*** 组件的初始数据*/data: {// 弹窗显示控制isShowToast: true,isShowToasts: false,isClick: true,nameArr: ['请选择', '', ''],currentTab: 0, // tab切换 provinceArr: [],provinceIndex: 0,cityArr: [],cityIndex: 0,countryArr: [],countryIndex: 0,hotcityList: [{id: 0,city: '北京'}, {id: 8,city: '上海'}, {id: 1,city: '天津'}, {id: 18,city: '广东'}]},/*** 组件的方法列表*/methods: {//隐藏hideGoodsDetail: function() {var that = thisthat.setData({isShowToast: true})},//显示showsGoodsDetail: function() {var that = thisvar tempLocalArr = that.properties.locationArr //传入的省市区var tempNameArr = that.data.nameArr //顶部省市区that.setData({isShowToast: false})// console.log('我是传入的值')// console.log(tempLocalArr)this.setData({provinceArr: city.getProvince()});// console.log(city.getProvince())//是否传入地址 传入则显示当前地址   为传入则显示之前地址if (tempLocalArr[0] == '' || tempLocalArr[1] == '' || tempLocalArr[2] == '') {console.log('我是未传入地址')} else {// console.log('我是传入了地址')tempNameArr[0] = tempLocalArr[0]tempNameArr[1] = tempLocalArr[1]tempNameArr[2] = tempLocalArr[2]var tempProvinceIndex = that.data.provinceArr.indexOf(tempLocalArr[0]) //省索引//在这里对不存在的地址进行兼容if (tempProvinceIndex == -1) {// console.log('我是省没有 找到')tempProvinceIndex = 0tempNameArr[0] = that.data.provinceArr[0]}var tempCityArr = city.getCity(that.data.provinceArr[tempProvinceIndex]) //市var tempCityIndex = tempCityArr.indexOf(tempLocalArr[1]) //市索引//在这里对不存在的地址进行兼容if (tempCityIndex == -1) {// console.log('我是市没有 找到')tempCityIndex = 0tempNameArr[1] = tempCityArr[0]}var tempCountryArr = city.getArea(that.data.provinceArr[tempProvinceIndex], tempCityArr[tempCityIndex]) //区var tempCountryIndex = tempCountryArr.indexOf(tempLocalArr[2]) //区索引//在这里对不存在的地址进行兼容if (tempCountryIndex == -1) {// console.log('我是区没有 找到')tempCountryIndex = 0tempNameArr[2] = tempCountryArr[0]}that.setData({nameArr: tempNameArr,provinceIndex: tempProvinceIndex,cityArr: tempCityArr,cityIndex: tempCityIndex,countryArr: tempCountryArr,countryIndex: tempCountryIndex,currentTab: 0,})}},//改变省provinceChange: function(e) {var that = thisvar tempNameArr = that.data.nameArrconsole.log(e.currentTarget.dataset.index)console.log(e.currentTarget.dataset.item)tempNameArr[0] = that.data.provinceArr[e.currentTarget.dataset.index]tempNameArr[1] = '请选择'tempNameArr[2] = ''that.setData({provinceIndex: e.currentTarget.dataset.index,nameArr: tempNameArr,countryArr: [],countryIndex: 0,})//获取市this.setData({cityArr: city.getCity(that.data.provinceArr[that.data.provinceIndex]),currentTab: 1,isClick: false,});console.log(that.data.cityArr)},//改变市cityChange: function(e) {var that = thisvar tempNameArr = that.data.nameArrtempNameArr[0] = that.data.provinceArr[that.data.provinceIndex]tempNameArr[1] = that.data.cityArr[e.currentTarget.dataset.index]tempNameArr[2] = '请选择'that.setData({cityIndex: e.currentTarget.dataset.index,nameArr: tempNameArr})//获取区this.setData({countryArr: city.getArea(that.data.provinceArr[that.data.provinceIndex], that.data.cityArr[that.data.cityIndex]),currentTab: 2});},//改变区区/县districtChange: function(e) {var that = thisvar tempNameArr = that.data.nameArrtempNameArr[0] = that.data.provinceArr[that.data.provinceIndex]tempNameArr[1] = that.data.cityArr[that.data.cityIndex]tempNameArr[2] = that.data.countryArr[e.currentTarget.dataset.index]that.setData({countryIndex: e.currentTarget.dataset.index,nameArr: tempNameArr,isShowToast: true,currentTab: 0})//关闭并返回this.triggerEvent('resultEvent', {nameArr: that.properties.nameArr})console.log(that.data.provinceArr[that.data.provinceIndex])// console.log(that.data.cityArr[that.data.cityIndex])// console.log(that.data.countryArr[that.data.countryIndex])//关闭并返回  省市区},// 截获竖向滑动  2018年7月5日19:55:40  刘宣亮catchTouchMove: function(res) {return false},// 点击tab切换   2018年7月5日19:59:30 刘宣亮navbarTap: function(e) {var that = thisthat.setData({currentTab: e.currentTarget.dataset.index,})console.log(e.currentTarget.dataset.index)},}
})

region-picker.json

{"component": true,"usingComponents": {}
}

以上就完成了组件

下面来看看怎么来调用吧

在需要调用的页面添加

"usingComponents": {

"region-picker": "../../components/region-picker/region-picker"

}

顺便补充一点吧,我添加页面调用的效果

这样没什么问题吧,my-add-address就是一个文件夹,index是我的习惯,你也可以直接my-add-address.wxml,最后会给大家看一下我的目录结构

my-add-address/index.wxml

<view class="redact-address"><view class="possess-layout"><view class="mains"><view class="address-msg"><view class="item-msg">收货人</view><view class="section"><input type="text" placeholder="请填写收货人姓名" value="{{consigneeName}}" bindblur="consigneeNameInput" placeholder-class="phcolor"></input></view><view class="address-right"><image src="../../../img/icon/icon-add-address-user.png"></image></view></view><view class="address-msg"><view class="item-msg">手机号码</view><view class="section"><input type="number" placeholder="请填写收货人手机号码" value="{{phone}}" maxlength="11" bindblur="phoneInput" placeholder-class="phcolor"></input></view></view><view class="address-msg" bindtap='chooseAddress'><view class="item-msg">所在地区</view><view class="section" bindtap='select'><input disabled="disabled" placeholder="省市区县、乡镇等" value="{{locationArr[0] + locationArr[1] + locationArr[2]}}" bindblur="consigneeRegionInput" placeholder-class="phcolor"></input></view><view class="address-rights" bindtap='select'><image src="../../../img/icon/icon-site-location.png"></image><view>定位</view></view></view><view class="address-msg"><view class="item-msg">详细地址</view><view class="section"><input type="text" placeholder="街道、楼牌号等" value="{{detailedAddress}}" bindblur="detailedAddressInput" placeholder-class="phcolor"></input></view></view><view class="label"><view class="label-title">标签</view><view class="label-list"><block wx:for="{{labelList}}" wx:key="index"><view class="labels {{labelDefault==index? 'labels-active': ''}}" data-index="{{index}}" bindtap="chooseLabelSelect">{{item}}</view></block></view></view><view class="default-setting"><view class="defaul-setting-left"><view>设置默认地址</view><view>提醒：每次下单会默认推荐使用该地址</view></view><image class="defaul-setting-right" src="{{defaults? '../../../img/icon/icon-off-by-default.png': '../../../img/icon/icon-off-by-default-red.png'}}" bindtap="chooseDefault"></image></view></view></view>
</view><view class="btn" bindtap="submit">保存</view><!-- 城市选择 S -->
<scroll-view scroll-y style="height: {{windowHeight}}px;width: 100%;" class='body'><region-picker id='getAddress' locationArr="{{locationArr}}" bind:resultEvent="resultEvent"></region-picker>
</scroll-view>
<!-- 城市选择 E -->

my-add-address/index.wxss

.redact-address {background: white;margin-bottom: 20rpx;
}.address-msg {height: 128rpx;display: flex;align-items: center;background: #fff;border-top: 2rpx solid #efefef;font-size: 28.68rpx;color: #333;padding: 0 20rpx;
}.address-right image {width: 32rpx;height: 32rpx;
}.address-rights {display: flex;align-items: center;
}.address-rights image {width: 26rpx;height: 32rpx;margin-right: 13rpx;
}.address-rights view {font-size: 28.68rpx;
}.address-msg:last-child {border-bottom: none;
}.section {width: 58%;
}.phcolor {color: #999;
}.item-msg {width: 25%;margin-right: 25rpx;
}.img {width: 35rpx;height: 35rpx;align-self: center;
}.address-right {width: 100rpx;display: flex;flex-direction: row-reverse;
}/* 标签 */.label {display: flex;height: 128rpx;align-items: center;margin-top: 73rpx;border-top: 1px solid #eee;border-bottom: 1px solid #eee;padding: 0 20rpx;
}.label-title {font-size: 28.68rpx;color: #333;margin-right: 83rpx;
}.label .label-list {display: flex;
}.label .label-list .labels {height: 40rpx;width: 96rpx;border: 1px solid #eee;margin-right: 37rpx;text-align: center;line-height: 40rpx;font-size: 24rpx;color: #000;border-radius: 20rpx;
}.labels-active {background: #f73c41 !important;color: #fff !important;
}/* 默认设置 */.default-setting {display: flex;justify-content: space-between;align-items: center;height: 160rpx;padding: 0 20rpx;
}.defaul-setting-left view:nth-child(1) {font-size: 28.68rpx;color: #333;margin-bottom: 25rpx;
}.defaul-setting-left view:nth-child(2) {font-size: 20rpx;color: #333;
}.defaul-setting-right {height: 64rpx;width: 105rpx;
}.btn {width: 680rpx;height: 88rpx;background: #f73c41;color: #fff;position: fixed;bottom: 55rpx;left: 35rpx;border-radius: 41.5rpx;font-size: 36rpx;text-align: center;line-height: 88rpx;
}/* 城市选择 */
.body {display: block;/* border: 1rpx solid #000; */box-sizing: border-box;
}.choose_address{height: 90rpx;width: 750rpx;box-sizing: border-box;padding: 0 40rpx 0 40rpx;font-size: 32rpx;line-height: 90rpx;border-bottom: 1rpx solid #aaa;
}

my-add-address/index.js

var app = getApp()
Page({/*** 页面的初始数据*/data: {addressMenuIsShow: false,consigneeName: "",phone: "",detailedAddress: "",labelList: ["家", "公司", "学校"], //标签labelDefault: 0, // 标签默认,defaults: 0,        // 默认// 城市选择windowHeight: 0,// locationArr: ['山东省', '青岛市', '黄岛区']locationArr: ['', '', '']},consigneeNameInput: function(e) { //获取收货人this.setData({consigneeName: e.detail.value})},phoneInput: function(e) { //获取手机号this.setData({phone: e.detail.value})},consigneeRegionInput: function(e) { //获取所在地址this.setData({consigneeRegion: e.detail.value})},detailedAddressInput: function(e) { //获取详细地址this.setData({detailedAddress: e.detail.value})},chooseLabelSelect: function(e) { //获取标签var index = e.currentTarget.dataset.index;this.setData({labelDefault: index})},submit: function() {var consigneeName = this.data.consigneeName;var phone = this.data.phone;var consigneeRegion = this.data.consigneeRegion;var detailedAddress = this.data.detailedAddressif (consigneeName == "") {wx: wx.showToast({title: '请输入姓名',image: "../../../img/icon/icon-reminder.png"})return false}else if (phone == "") {wx: wx.showToast({title: '请输入手机号码',image: "../../../img/icon/icon-reminder.png"})return false}else if (consigneeRegion == "") {wx: wx.showToast({title: '请选择所在地区',image: "../../../img/icon/icon-reminder.png"})return false}else if (detailedAddress == "") {wx: wx.showToast({title: '请输入详细地址',image: "../../../img/icon/icon-reminder.png"})return false}else {wx.navigateTo({url: '../../my/my-delivery-address/index',})}},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {var _this = this//获得dialog组件this.getAddress = this.selectComponent("#getAddress");wx.getSystemInfo({success: function (res) {// console.log(res.pixelRatio) //设备像素比// console.log(res.windowWidth) //可使用窗口宽度// console.log(res.windowHeight) //可使用窗口高度_this.setData({windowWidth: res.windowWidth, //可使用窗口宽度windowHeight: res.windowHeight, //可使用窗口高度})}})},/*** 是否选择默认*/chooseDefault: function() {this.setData({defaults: this.data.defaults})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},//选择地址     点击所在地区弹出选择框chooseAddress: function (e) {var _this = this_this.getAddress.showsGoodsDetail();},//组件回调resultEvent: function (e) {var _this = this// console.log(e)// console.log(e.detail.nameArr)_this.setData({locationArr: e.detail.nameArr})},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

my-add-address/index.json

{"navigationBarTitleText": "添加收货地址","usingComponents": {"region-picker": "../../components/region-picker/region-picker"}
}

以上就是所有代码

上图

目录结构

最后来张效果图

可扫码自行下载city.js文件

city.js文件可自行下载：微信小程序实现城市选择效果city.js文件_微信小程序城市选择器-互联网文档类资源-CSDN下载

微信小程序实现城市选择效果(超详细)相关推荐

微信小程序开发环境搭建（超详细）
微信小程序开发环境的搭建是很简单的首先我们需要是登录微信公众平台微信公众平台点击右上角立即注册注册账号类型选择小程序进入注册界面后按提示完成账号信息邮箱激活信息登记注册完成后界面如下, ...
微信小程序实现城市选择和定位
效果如图: 这么多城市需要city.js,放在utils下面具体内容如下,很多城市 var cityObj = [{ "id": "35", "pr ...
微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序点击选择拨打多个电话
微信小程序点击选择拨打多个电话效果预览 wxml 内 <view class='product-contact' wx:if="{{contact!=''}}" data- ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序：开心锤锤超火动态表情包微信小程序源码下载自动采集
这是一款表情包小程序源码大家刷抖音的时候应该都刷过开心锤锤这个网红卡通短视频吧现在这一款小程序就是和它有关的里面的表情包呢大部分都是动态表情包(斗图的时候是不是更炫) 至于里面的表情包人物的就都 ...
微信小程序面向个人开放-附超详尽申请教程
周一晚上10点,腾讯官方放出消息,小程序新增6大能力,并面向个人开发者开放.这也就意味着每个人都可以申请小程序开发资格(之前个人开发者没有wxappid,只能在开发工具上进行体验).下面是个人申请微信 ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...

微信小程序实现城市选择效果(超详细)

region-picker.wxml

微信小程序实现城市选择效果(超详细)相关推荐

最新文章

热门文章