微信小程序选择器地区选择器

最近在写微信小程序页面，原有的picker组件不能更改样式，选择内容多了不容易找到自己想选择的，所以就自己写的选择地区的选择器
有用到mp-form组件，直接去微信小程序官网可以按需下载

WXML

<view class="indexPage {{proInfoWindow?'indexFixed':''}}"><mp-form id="form" rules="{{rules}}" models="{{formData}}"><view class="title">地区</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell" style="padding: 10px 16px;"><view class="weui-cell__bd" style="display:flex;justify-content:flex-start;align-items:center;"><input class="weui-input" disabled="true" bindtap="openDialog" value="{{cityValue}}" data-field="city" data-value="{{cityname}}" name="city" placeholder-style="color:#333333;width:100%;font-size:32rpx;"  /><view class="san" bindtap="openDialog" data-field="city"></view><view class="weui-demo-dialog {{isCitytrue ? 'weui-demo-dialog_show' : ''}}"><view class="weui-mask" bindtap="closeDialog"></view><!-- 省份 --><view class="weui-half-screen-dialog" wx:if="{{provinceStatus}}"><view class="weui-half-screen-dialog__bd"><view class="weui-half-screen-dialog__desc" style="color:#333333;font-size:40rpx;font-weight:blod;position:fixed;top:37%;left:0; z-index: 100000;background:#ffffff;width:100%;height:100rpx;padding:20rpx 0 0 30rpx;box-sizing:border-box;align-items:center">选择省份</view><view class="weui-half-screen-dialog__tips"><view class="pre" style="margin-left:0;" bindtap="changeAllProv" data-province="全国" style="{{cityValue=='全国'? 'border: 2rpx solid #2586F3;color: #2586F3;':''}}margin-left:0;">全国</view></view><view class="weui-half-screen-dialog__tips" style="border-top:1rpx solid #E9E9E9;margin-top: 30rpx;"><block wx:for="{{province}}" wx:key="{{index}}"><view class="pre" style="{{index%3==0?'margin-left:0;':''}}{{index>2?'margin-top:20rpx;':''}}" bindtap="changeProv" data-province="{{item}}">{{item}}</view></block></view></view></view><!-- 城市 --><view class="weui-half-screen-dialog" wx:if="{{!provinceStatus}}"><view class="weui-half-screen-dialog__bd"><view class="weui-half-screen-dialog__desc" style="display:flex;justify-content:space-between; position:fixed;top:37%;left:0; z-index: 100000;background:#ffffff;width:100%;height:100rpx;padding:0 30rpx;box-sizing:border-box;align-items:center"><text bindtap="backProv" style="color:#333333;font-size:40rpx;font-weight:blod;" >省份:{{provin}}</text><text bindtap="backProv" style="color:#2586F3;font-size:32rpx;">返回</text></view><view class="weui-half-screen-dialog__tips"><view class="pre" style="margin-left:0;" bindtap="changeAllCity" data-city="全省"  style="{{formData.city=='全省'? 'border: 2rpx solid #2586F3;color: #2586F3;':''}}margin-left:0;">全省</view></view><view class="weui-half-screen-dialog__tips" style="border-top:1rpx solid #E9E9E9;margin-top: 30rpx;"><block wx:for="{{citynum}}" wx:key="{{index}}"><view class="pre " bindtap="choosCity" data-city="{{item}}" style="{{index%3==0?'margin-left:0;':''}}{{index>2?'margin-top:20rpx;':''}}{{cityname==item? 'border: 2rpx solid #2586F3;color: #2586F3;':''}}">{{item}}</view></block></view></view></view></view></view></view></view><view class="title">类型</view><view class="weui-cells weui-cells_after-title"><view class="page"><view class="page__bd"><view class="section section_gap"><radio-group class="radio-group" name="type" data-feild="type" bindchange="radioChange"><label wx:for="{{radioItems}}" wx:key="value"><radio color="#2586F3" class="radio"  value="{{item.value}}" checked="{{item.checked}}" style="{{index>=1?'margin-left:150rpx':''}}"><text>{{item.name}}</text></radio></label></radio-group></view></view></view></view><view class="title">分类</view><view class="weui-cells weui-cells_after-title" style="margin-bottom:200rpx;"><view class="page"><view class="page__bd"><view class="section section_gap"><radio-group class="radio-group" name="industry" data-feild="industry" bindchange="radioChange" style="display:flex;flex-direction:column;padding-bottom:40rpx;"><label wx:for="{{industrys}}" wx:key="value"><radio color="#2586F3" class="radio" value="{{item.name}}" checked="{{item.checked}}"><text>{{item.name}}</text><view class="small_type" wx:if="{{item.name=='二手设备'}}"><text decode="{{true}}">机床&nbsp;</text><text decode="{{true}}">工程&nbsp;</text><text decode="{{true}}">纺织&nbsp;</text><text>化工</text></view><view class="small_type" wx:if="{{item.name=='再生资源'}}"><text decode="{{true}}">废塑料&nbsp;</text><text decode="{{true}}">废钢&nbsp;</text><text decode="{{true}}">废纸&nbsp;</text><text decode="{{true}}">废有色&nbsp;</text><text>建筑垃圾</text></view><view class="small_type" wx:if="{{item.name=='废旧物资'}}"><text decode="{{true}}">生活废旧&nbsp;</text><text decode="{{true}}">工业废旧&nbsp;</text><text decode="{{true}}">铁路废旧&nbsp;</text><text decode="{{true}}">废铁&nbsp;</text><text>废旧耐火材料</text></view><view class="small_type" wx:if="{{item.name=='旧货'}}"><text decode="{{true}}">办公设备&nbsp;</text><text decode="{{true}}">酒店旧货&nbsp;</text><text decode="{{true}}">家电&nbsp;</text><text decode="{{true}}">二手车&nbsp;</text><text>生活用品</text></view><view class="small_type" wx:if="{{item.name=='危废'}}"><text decode="{{true}}">危废(国标)&nbsp;</text><text decode="{{true}}">废油&nbsp;</text><text decode="{{true}}">蓄电池&nbsp;</text><text decode="{{true}}">废石墨&nbsp;</text><text>污泥</text></view></radio></label></radio-group></view></view></view></view></mp-form><view class="btn_bac"><button bindtap="buyFinish" formType="submit" hover-class="btn_hover">确定</button></view></view>

WXSS

.indexFixed {position: fixed;top: 0;left: 0;bottom: 0;right: 0;
}
.weui-demo-dialog {visibility: hidden;opacity: 0;
}.weui-demo-dialog_show {visibility: visible;opacity: 1;
}.weui-demo-dialog_show .weui-half-screen-dialog {height: 60%;background: #fff;overflow-y: auto;border-radius: 0;padding: 0 30rpx 30rpx;
}.weui-half-screen-dialog__tips {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;margin-top: 65rpx;
}.pre {border: 2rpx solid #e9e9e9;width: 30%;margin-left: 20rpx;height: 70rpx;text-align: center;line-height: 70rpx;border-radius: 4rpx;color: #333;
}.radio-group {background: #fff;padding: 0 32rpx;box-sizing: border-box;line-height: 112rpx;
}.small_type {display: flex;justify-content: flex-start;align-items: center;box-sizing: border-box;/* padding-left: 56rpx; */
}.radio .small_type text {font-size: 26rpx;color: #666666;line-height: 10rpx;
}.title {display: flex;align-items: center;font-size: 30rpx;height: 80rpx;color: #666666;padding: 0 32rpx;box-sizing: border-box;
}.weui-cells::before{border-top:none;
}
.weui-cells::after{border-top:none;
}.radio text {font-size: 32rpx;color: #333;
}.btn_bac {width: 100%;height:200rpx;display: flex;justify-content: center;align-items: center;position: fixed;bottom: 0;left: 0;z-index: 100;
}
.btn_bac button {width: 670rpx;height: 88rpx;background: #2586f3;box-shadow: 0px 4px 10px 0px rgba(37, 134, 243, 0.3);color: #ffffff;font-size:36rpx;
}button::after {border: none;
}.btn_hover {opacity: 0.8;
}

var p_c = require("../../utils/p_c.js");
import {EqSearch
} from "eqSearch-model.js";
var eqSearch = new EqSearch();Page({data: {radioItems: [{name: '全部',value: '-1',checked: true},{name: '求购',value: '0'},{name: '供应',value: '1'}],industrys: [{name: "二手设备",detail: "机床、工程、纺织、印刷、化工...",checked: true}, {name: "再生资源",detail: "废塑料、废钢、废纸、废有色..."}, {name: "废旧物资",detail: "生活废旧、工业废旧、铁路废旧..."}, {name: "旧货",detail: "办公设备、酒店旧货、家电、二手车..."}, {name: "危废",detail: "危废(国标)、废油、蓄电池、废石墨..."}],province: p_c.province,city: p_c.city,provinceStatus: true,proInfoWindow: false,},onLoad: function(a) {var t = this;t.eventChannel = t.getOpenerEventChannel()t.eventChannel.on('orderList', function(data) {t.setData({formData: data.data})})// 初始化选择器的值// 类型t.data.radioItems.forEach((item,index)=>{if(item.value==t.data.formData.type){item.checked=true;}else{item.checked = false;}})// 行业t.data.industrys.forEach((item, index) => {if (item.name == t.data.formData.industry) {item.checked = true;} else {item.checked = false;}})// 地区if (t.data.formData.province=="全国"){t.data.cityValue="全国";} else if (t.data.formData.city == "全省"){t.data.cityValue = t.data.formData.province;}else{t.data.cityValue = t.data.formData.province + "-" + t.data.formData.city;}t.setData({radioItems: t.data.radioItems,industrys: t.data.industrys,cityValue: t.data.cityValue})console.log(t.data.formData)},// 单选框radioChange: function(e) {console.log(e)console.log('radio发生change事件，携带value值为：', e.detail.value);var feild = e.currentTarget.dataset.feild;var industrys = this.data.industrys;var radioItems = this.data.radioItems;if (e.currentTarget.dataset.feild=="type"){for (var i = 0, len = radioItems.length; i < len; ++i) {radioItems[i].checked = radioItems[i].value == e.detail.value;}} else if (e.currentTarget.dataset.feild == "industry"){for (var i = 0, len = industrys.length; i < len; ++i) {industrys[i].checked = industrys[i].name == e.detail.value;}}this.setData({radioItems: radioItems,industrys:industrys,[`formData.${feild}`]: e.detail.value});},// 打开弹框 openDialog: function(e) {this.setData({proInfoWindow: true,isCitytrue: true})},// 关闭弹框closeDialog: function() {this.setData({isCitytrue: false,proInfoWindow: false})},// 返回省份选择backProv: function() {this.setData({provinceStatus: true})},// 选择省份changeProv: function(e) {this.setData({provinceStatus: false,provin: e.currentTarget.dataset.province,citynum: ''})this.data.city.forEach((item, index) => {if (item.name == e.currentTarget.dataset.province) {this.setData({citynum: item.cities})}})},// 选择城市，回显inputchoosCity: function(e) {var city = e.currentTarget.dataset.city;this.setData({isCitytrue: false,cityname: city,cityValue: this.data.provin + "-" + city,[`formData.city`]: city,[`formData.province`]: this.data.provin,[`formData.page`]: 1,})},// 选择全国changeAllProv: function(e) {this.setData({isCitytrue: false,cityname: e.currentTarget.dataset.province,cityValue: e.currentTarget.dataset.province,[`formData.city`]: '',[`formData.province`]: e.currentTarget.dataset.province,proInfoWindow: false,[`formData.page`]: 1,})},// 选择全省changeAllCity: function(e) {this.setData({isCitytrue: false,cityname: e.currentTarget.dataset.city,cityValue: this.data.provin,[`formData.city`]: e.currentTarget.dataset.city,[`formData.province`]: this.data.provin,proInfoWindow: false,[`formData.page`]: 1})},// 选择行业分类choosIndustry: function(e) {this.setData({isIndustrytrue: false,[`formData.industry`]: e.currentTarget.dataset.industry,proInfoWindow: false,[`formData.page`]: 1})},// 选择类型choosType: function(e) {var type = -1if (e.currentTarget.dataset.type == "全部") {type = -1;} else if (e.currentTarget.dataset.type == "求购") {type = 0;} else if (e.currentTarget.dataset.type == "供应") {type = 1}this.setData({isTypetrue: false,[`formData.type`]: type,[`formData.page`]: 1,typeQ: e.currentTarget.dataset.type,proInfoWindow: false,})},// 提交后，返回上一页buyFinish: function() {var pages = getCurrentPages();var currPage = pages[pages.length - 1]; //当前页面var prevPage = pages[pages.length - 2]; //上一个页面var t = this;wx.navigateBack({url: '../detail/detail',success: function() {prevPage.setData({orderList: [],oldData:[],totalpage: 1,page:1,typeQ: t.data.formData.type == -1 ? '求购/供应' : t.data.formData.type == 0 ? '求购':'供应',cityValue: t.data.formData.province == "全国" ? '全国' : t.data.formData.city == "全省" ? t.data.formData.province : t.data.formData.city,[`formData.industry`]: t.data.formData.industry,})// eqSearch.getOrderList(t.data.formData).then((data) => {//   if (data.data.data.length > 0) {//     data.data.data.forEach((item, index) => {//       item.price = item.price.slice(0, -3)//     })//     prevPage.setData({//       orderList: prevPage.data.orderList.concat(data.data.data),//       totalpage: data.data.totalpage//     })//   }// })prevPage.getOrderList(t.data.formData)}})}})

微信小程序选择器地区选择器相关推荐

微信小程序picker地区选择器显示省市二级联动
效果图: 微信官方配置二级level="city",无效(官方说正在修改2022.12.22) 自己写,用多级联动写 html: <picker mode="mul ...
微信小程序原生地区选择器
微信小程序获取地区code
微信小程序获取地区code (接腾讯地图) 微信小程序官方文档中,有一个 wx.getLocation(点击跳转API) 接口,可以获取当前的地理位置.速度.如没有code/省市区等相关信息,我们可以 ...
撸个微信小程序的省市区选择器
起因微信小程序虽然已经有现成的封装好的省市区选择器给开发者使用,然鹅不幸的是,微信地址库的数据和公司用的地址库数据很难一一对上,那就只能撸起袖子自己写个组件了. 最终效果思维导图主要代码组件 ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
微信小程序创建节点选择器获取宽高wx.createSelectorQuery
微信小程序提供了一个获取节点宽高等信息的方法,一共是两步. 1.在对应的节点上定义一个id <image src='{{imgUrl}}' class="look-image" ...
range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
微信小程序样式-元素选择器的使用
微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua CSS 元素选择器最常见的 CSS 选择器是元素 ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）
效果体验二维码(外联图片失效了) 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处 ...
微信小程序之滚动选择器(时间日期选择器)
微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到pick ...

微信小程序选择器地区选择器

微信小程序选择器地区选择器相关推荐

最新文章

热门文章

微信小程序 选择器 地区选择器

微信小程序 选择器 地区选择器相关推荐

最新文章

热门文章

微信小程序选择器地区选择器

微信小程序选择器地区选择器相关推荐