微信小程序模仿拼多多APP地址选择样式

最终效果在

首先在page文件夹下创建components文件夹，在components文件夹下创建region-picker的文件夹，然后在region-picker文件夹下创建Component名称为region-picker。

region-picker.js

/* region-picker.js */
import area from '../../../utils/area.js';
Component({properties: {showRegion: {type: Boolean,observer: function (newVal, oldVal) {this.setData({dialog: newVal,});},},regionValue: {type: Array,value: [],observer: function (newVal, oldVal) {if (newVal.length > 0) {let select = -1;for (let i = newVal.length - 1; i >= 0; i--) {if (newVal[i].id !== '') {select = i;break;}}// 除最低级别区（select = 2）以外，需要获取当前级别下一级的数据this.setData({['region.tabs']: newVal,['region.select']: select < 2 ? select + 1 : select,}, () => {this.setData({area: this.getChildArea(select < 2 ? select + 1 : select),});});}},},},data: {dialog: false,area: area,region: {tabs: [{name: '请选择',id: '',},{name: '请选择',id: '',},{name: '请选择',id: '',},],select: 0,},},methods: {// 关闭 picker 触发的方法emitHideRegion: function () {if (this.data.region.tabs[2].id === '') {wx.showToast({title: '请选择所在地',icon: 'none',duration: 2000,});return false;}let myEventDetail = {}; // detail对象，提供给事件监听函数let myEventOption = {}; // 触发事件的选项this.setData({dialog: !this.data.dialog,});myEventDetail = {showRegion: this.data.dialog,regionValue: this.data.region.tabs,};this.triggerEvent('myevent', myEventDetail, myEventOption);},bindRegionChange: function (e) {// 获取当前选中项的name和id并赋值给data中的数据console.log('123123123')let id = 'region.tabs[' + this.data.region.select + '].id';let name = 'region.tabs[' + this.data.region.select + '].name';this.setData({[id]: e.target.dataset.id,[name]: e.target.dataset.name,});// 除了三级以外的需要获取对应子选项if (this.data.region.select < 2) {this.setData({['region.select']: ++this.data.region.select,}, () => {// 获取子选项this.setData({area: this.getChildArea(this.data.region.select),});});} else {// 三级选项选择完毕关闭省市区选择器this.emitHideRegion();}},getChildArea: function (level) {let _id = '';// 默认取完整的数据let _area = area;// 根据层级取当前层级下的数据for (let i = 0; i < level; i++) {_id = this.data.region.tabs[i].id;for (let j = 0; j < _area.length; j++) {if (_area[j].id === _id) {_area = _area[j]._child;break;}}}return _area;},// 省市区tab切换changeRegionLevel: function (e) {let level = e.target.dataset.level;// 三级选项的tab点击无效果if (level === 2) return false;// 当前选中tab和级别小于当前选中tab的状态都置为初始化状态for (let i = level; i < 3; i++) {let string = 'region.tabs[' + i + ']';this.setData({[string]: {name: '请选择',id: '',},});}this.setData({['region.select']: level,});this.setData({area: this.getChildArea(level),});},},
});

region-picker.wxml

<view class="free-dialog {{dialog ? 'free-dialog--show' : ''}}"><view class="free-dialog__mask" bindtap="emitHideRegion"></view><view class="free-dialog__container"><view class="free-dialog__container__header"><view>选择所在地区</view><imagesrc="/../imgs/s.png"class="close"bindtap="emitHideRegion"></image></view><view class="free-dialog__container__content"><view class="free-content {{isIphoneX ? 'ipx' : ''}}"><view class="free-content__tabs"><viewclass="free-content__tabs__tab {{region.select === index ? 'select' : ''}}"wx:for="{{region.tabs}}"wx:key="{{index}}"wx:if="{{index <= region.select}}"data-level="{{index}}"bindtap="changeRegionLevel">{{item.name}}</view></view><scroll-view scroll-y class="free-content__scroll"><viewclass="free-content__scroll__item"wx:for="{{area}}"wx:key="id"data-id="{{item.id}}"data-name="{{item.name}}"bindtap="bindRegionChange">{{item.name}}</view></scroll-view></view></view></view>
</view>

region-picker.wxss

/* region-picker.wxss */.free-dialog__mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;background: rgba(0, 0, 0, 0.7);display: none;
}.free-dialog__container {position: fixed;left: 0;bottom: 0;width: 100%;background: #f1f1f1;transform: translateY(150%);transition: all 0.4s ease;z-index: 11;
}.free-dialog--show .free-dialog__container {transform: translateY(0);
}.free-dialog--show .free-dialog__mask {display: block;
}.free-dialog__container__header {padding: 24rpx 30rpx;text-align: center;background: white;
}.free-dialog__container__header .close {position: absolute;right: 30rpx;top: 31rpx;width: 40rpx;height: 40rpx;border: 1px solid green;
}.free-content {background: white;border-bottom: 40rpx solid white;
}.free-content.ipx {border-bottom: 72rpx solid white;
}.free-content__tabs__tab {display: inline-block;padding: 12rpx 46rpx;font-size: 32rpx;color: #333;border-bottom: 4rpx solid white;
}.free-content__tabs__tab.select {border-color: #fa263c;
}.free-content__scroll {padding: 0 40rpx;height: 480rpx;box-sizing: border-box;
}.free-content__scroll__item {margin-top: 40rpx;height: 40rpx;line-height: 40rpx;font-size: 28rpx;color: #333;
}

region-picker.json

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

这个组件到此就已经写完了，如何引用呢
在page文件夹下创建rmb文件夹，然后创建page命名为rmb。

rmb.js

/* 页面的 js */
Page({data: {regionValue: [],showRegion: false,},chooseRegion: function (e) {console.log('123')console.log(e)this.setData({showRegion: true,});},emitHideRegion: function (e) {this.setData({showRegion: e.detail.showRegion,regionValue: e.detail.regionValue,});},
});

rmb.json

{"usingComponents": {"region-picker": "../components/region-picker/region-picker"}
}

rmb.wxml


<view bindtap="chooseRegion">请选择</view>
<view><text wx:if="{{regionValue[0].id}}">{{regionValue[0].name}}</text><text wx:if="{{regionValue[1].id}}">{{regionValue[1].name}}</text><text wx:if="{{regionValue[2].id}}">{{regionValue[2].name}}</text>
</view>
<region-picker region-value="{{regionValue}}"show-region="{{showRegion}}"bind:myevent="emitHideRegion">
</region-picker>

area.js
有些地址重复了，等我修复一下就发上来，QQ：961052877
https://download.csdn.net/download/u010481239/12370268

微信小程序模仿拼多多APP地址选择样式相关推荐

微信小程序模仿拼多多搜索页
效果看拼多多的搜索页,先上张静态图 wxml  <view class='search-box'><icon class='iconfont ic ...
微信小程序模仿开眼视频app（二）——搜索功能
微信小程序模仿开眼视频app(一)有介绍首页.视频详情和分类部分可到我的github账号上去copy文件搜索部分一开始没想要设置历史记录啊.热门搜索啊这些的,只是想把搜索框弄好看一点,无意中发现 ...
微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件先展示一下我实现了的功能吧提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类
<微信小程序模仿开眼视频app(一)--视频首页.视频详情.分类> <微信小程序模仿开眼视频app(二)--搜索功能> 可到我的github账号上去copy文件瀑布流部分文 ...
开发微信小程序调用拼多多接口
前些日子开发微信小程序,属于商城类的,由于自己的商品不够充实,我这边附加了一些其它接口,如拼多多和京东,微信明令禁止淘宝接口,所以就没有接淘宝的. 使用这两家接口的时候遇到了一些坑,和浪费了一些时间, ...
微信小程序：拼多多推客开发
做过优惠券的应该都知道吧,可以使用对应平台的API权限,这样就可以很方便的进行数据获取与推广了,一般都是做的拼多多与淘宝,因为京东的要求比较高,需要你的流量起来以后才可以申请接口权限. 下面是使用拼多 ...
微信小程序仿京东省市县地址选择
效果图因为是外包项目,代码以实现功能为要求而已,轻喷. 小程序部分代码 wxml <view class="page"> <view class="c ...
微信小程序仿拼多多首页导航按钮
这里我也是参考别人实现的 https://blog.csdn.net/zhaohanqq/article/details/84389049 https://www.jb51.net/article/1 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...

微信小程序模仿拼多多APP地址选择样式

微信小程序模仿拼多多APP地址选择样式相关推荐

最新文章

热门文章