小程序自定制从顶部弹出的picker，模拟贝壳找房

1.背景

1.1.要求：顶部有一个tab栏，点开后会存在1级，2级，3级菜单（不论有积极菜单，都要点击到最后一级才会选中）
1.2.要求：对于有些数据第一项需要加不限，有些不需要，根据要求自行添加，点击不限展示原文字，只有点击不限之外的文字选项才会放在tab中展示
1.3.要求：对于筛选的部分，里边有可以多项选择的，有些不是多项的，须分开
1.4.要求：有多级的只有点击了最后一级才会把选择的文字添加到tab的对应位置，否则对应的tab位置的文字为上一次选中的
1.5.要求：每次展开select时，如果之前有选择过的，则直接展示选中的那个展开状态，否则不用

2.思考

2.1 当时做的匆忙，都是写死的，有些是tag_name 和 tag_id ,有些是name 和 id，当时赶项目，所以没做优化，如果可以，和接口人员商议一下进行统一，就可以使用循环，不用谢name多套了。
2.2 对于1中的1.1，1.2，1.3都比较简单。对于1.4和1.5，因为小程序是双向绑定的，只要值变展示就跟着变，如果想着只用一套变量来存储，很难实现，所以使用了两套。
2.3 多增加了一个locationName对象，把最终的展示文字存放在locationName.name中，其它的oneIndex，twoIndex，threeIndex分别对应第几个最终结果，在点击tab和内层的时候再把最终的值拿出来比对，展示最终选中的状态即可。
2.4 在滚动这件事情上使用 scroll-view 标签比较好使

3.代码部分

3.1wxml

<!-- 列表筛选 -->
<view class='newHouseTabOut'><view class='newHouseTab flex {{maskFlag?"fixedTop":""}}'><!---- 区域 ----><view class='newHouseTabLi flex alignC {{location.locationName.name?"on":""}} xflb_wz' data-id="0" catchtap="tab"><view class='newHouseTabLi-msg wmax130 line1'>{{location.locationName.name?location.locationName.name:"位置"}}</view><view class='newHouseTabLi-sj'></view></view><!---- 价格 ----><view class='newHouseTabLi flex alignC w170 {{priceIndex>0?"on":""}} xflb_jg' data-id="1" catchtap="tab"><view class='newHouseTabLi-msg wmax144 line1'>{{priceIndex>0?pageConfig.price[priceIndex].tag_name:"价格"}}</view><view class='newHouseTabLi-sj'></view></view><!---- 户型 -----><view class='newHouseTabLi flex alignC {{roomtagIndex>0?"on":""}} xflb_hx' data-id="2" catchtap="tab"><view class='newHouseTabLi-msg wmax130 line1'>{{roomtagIndex>0?pageConfig.roomtag[roomtagIndex].tag_name:"户型"}}</view><view class='newHouseTabLi-sj'></view></view><!----- 筛选 -----><view class='newHouseTabLi flex alignC w90 {{shaixuan.tese.length || shaixuan.leixing > -1 || shaixuan.mianji.length || shaixuan.kaipan > -1 || shaixuan.zhuangxiu > -1?"on":""}} xflb_sx' data-id="3" catchtap="tab"><view class='newHouseTabLi-msg'>筛选</view><view class='newHouseTabLi-sj'></view></view><!-- 排序 --><view class='newHouseTabLi-sx {{paixuIndex>0?"on":""}} xflb_px' data-id="4" catchtap="tab"></view></view>
</view><!-- 下拉select样式 -->
<view class='newHouseMask' wx:if="{{maskFlag?true:false}}" catchtap="maskClick"><!-- 位置 --><view class='newHouseMaskLi newHouseMaskLi-locatin' wx:if="{{tabid==0?true:false}}" catchtap="prevent"><!-- 一级 --><scroll-view scroll-y class='newHouseMaskLi-one bg_e5e5e5'><block wx:for="{{location.locationOneArr}}" wx:for-index="locationOneI"><block wx:if="{{locationOneI==0||locationOneI==1}}"><view class='newHouseMaskLi-oneLi  {{location.locationOneIndex==locationOneI?"on":""}}' data-index="{{locationOneI}}" catchtap='clickLocationOne'><view class='maxw175 line1'>{{item.tag_name}}</view></view></block><!-- 对于板块和地铁做限制，可能会不存在 --><block wx:if="{{(locationOneI==2)&&(pageConfig.block.length)}}"><view class='newHouseMaskLi-oneLi  {{location.locationOneIndex==locationOneI?"on":""}}' data-index="{{locationOneI}}" catchtap='clickLocationOne'><view class='maxw175 line1'>{{item.tag_name}}</view></view></block><block wx:if="{{(locationOneI==3)&&(pageConfig.metro.length)}}"><view class='newHouseMaskLi-oneLi  {{location.locationOneIndex==locationOneI?"on":""}}' data-index="{{locationOneI}}" catchtap='clickLocationOne'><view class='maxw175 line1'>{{item.tag_name}}</view></view></block></block></scroll-view><!-- 二级,区域 --><scroll-view scroll-y class='newHouseMaskLi-two bg_fff' wx:if='{{(location.locationOneIndex==1)&&pageConfig.district.length}}'><block wx:for="{{pageConfig.district}}" wx:for-index="locationTwoI"><view class='newHouseMaskLi-twoLi line1 {{location.locationTwoIndex1==locationTwoI?"on":""}}' data-index='{{locationTwoI}}' data-type='1' data-name="{{item.tag_name}}" catchtap='clickLocationTwo'>{{item.tag_name}}</view></block></scroll-view><!-- 二级，板块 --><scroll-view scroll-y class='newHouseMaskLi-two bg_fff' wx:if='{{(location.locationOneIndex==2)&&pageConfig.block.length}}'><block wx:for="{{pageConfig.block}}" wx:for-index="locationTwoI"><view class='newHouseMaskLi-twoLi line1 {{location.locationTwoIndex2==locationTwoI?"on":""}}' data-index='{{locationTwoI}}' data-type='2' data-name="{{item.tag_name}}" catchtap='clickLocationTwo'>{{item.tag_name}}</view></block></scroll-view><!-- 二级，地铁 --><scroll-view scroll-y class='newHouseMaskLi-two bg_fff' wx:if='{{(location.locationOneIndex==3)&&pageConfig.metro.length}}'><block wx:for="{{pageConfig.metro}}" wx:for-index="locationTwoI"><view class='newHouseMaskLi-twoLi line1 {{location.locationTwoIndex3==locationTwoI?"on":""}}' data-index='{{locationTwoI}}' data-type='3' data-name="{{item.name}}" catchtap='clickLocationTwo'>{{item.name}}</view></block></scroll-view><!-- 三级 --><scroll-view scroll-y class='newHouseMaskLi-three bg_fff' wx:if="{{location.locationOneIndex==3&&(location.locationTwoIndex3>-1)}}"><block wx:for="{{pageConfig.metro[location.locationTwoIndex3].station}}" wx:for-index="locationThreeI"><view class='newHouseMaskLi-threeLi line1 {{location.locationThreeIndex==locationThreeI?"on":""}}' data-index='{{locationThreeI}}' data-name="{{item.name}}" data-type='3' catchtap='clickLocationThree'>{{item.name}}</view></block></scroll-view></view><!-- 价格 --><scroll-view scroll-y class='newHouseMaskLi newHouseMaskLi-price' wx:if="{{tabid==1?true:false}}" catchtap="prevent"><block wx:for="{{pageConfig.price}}" wx:for-index="priceI"><view class='newHouseMaskLi-price-li {{priceI==priceIndex?"on":""}}' data-index="{{priceI}}" catchtap='clickSelectOne'>{{item.tag_name}}</view></block></scroll-view><!-- 户型 --><scroll-view scroll-y class='newHouseMaskLi newHouseMaskLi-price' wx:if="{{tabid==2?true:false}}" catchtap="prevent"><block wx:for="{{pageConfig.roomtag}}" wx:for-index="roomtagI"><view class='newHouseMaskLi-price-li {{roomtagI==roomtagIndex?"on":""}}' data-index="{{roomtagI}}" catchtap='clickSelectOne'>{{item.tag_name}}</view></block><view class='newHouseMaskLi-price-li on'>不限</view></scroll-view><!-- 筛选 --><view style='width:100%;height:100%;' wx:if="{{tabid==3?true:false}}"><scroll-view scroll-y class='newHouseMaskLi newHouseMaskLi-sx' style='' catchtap="prevent"><!-- 特色 --><block wx:if="{{pageConfig.recommendTag}}"><view class='newHouseMaskLi-sx-title'>特色</view><view class='newHouseMaskLi-sx-ul clearfix'><block wx:for="{{pageConfig.recommendTag}}" wx:for-item="recommendTag"><view class='newHouseMaskLi-sx-li {{recommendTag.flag==1?"on":""}}' data-index="{{index}}" data-id="{{recommendTag.tag_id}}" data-type="0" catchtap='shaixuanTwo'>{{recommendTag.tag_name}}</view></block></view></block><!-- 类型 --><block wx:if="{{pageConfig.channel}}"><view class='newHouseMaskLi-sx-title'>类型</view><view class='newHouseMaskLi-sx-ul clearfix'><view class='newHouseMaskLi-sx-li {{shaixuan.leixing==index?"on":""}}' wx:for="{{pageConfig.channel}}" wx:for-item="channel" catchtap='shaixuanOne' data-type='1' data-index="{{index}}">{{channel.tag_name}}</view></view></block><!-- 面积 --><block wx:if="{{pageConfig.mjtag}}"><view class='newHouseMaskLi-sx-title'>面积</view><view class='newHouseMaskLi-sx-ul clearfix'><view class='newHouseMaskLi-sx-li {{mjtag.flag==1?"on":""}}' wx:for="{{pageConfig.mjtag}}" wx:for-item="mjtag" data-index="{{index}}" data-type="2" data-id="{{mjtag.tag_id}}" catchtap='shaixuanTwo'>{{mjtag.tag_name}}</view></view></block><!-- 开盘时间 --><block wx:if="{{pageConfig.kptag}}"><view class='newHouseMaskLi-sx-title'>开盘时间</view><view class='newHouseMaskLi-sx-ul clearfix'><view class='newHouseMaskLi-sx-li {{shaixuan.kaipan==index?"on":""}}' wx:for="{{pageConfig.kptag}}" wx:for-item="kptag" catchtap='shaixuanOne' data-type='3' data-index="{{index}}">{{kptag.tag_name}}</view></view></block><!-- 装修 --><block wx:if="{{pageConfig.decoratetag}}"><view class='newHouseMaskLi-sx-title'>装修</view><view class='newHouseMaskLi-sx-ul clearfix'><view class='newHouseMaskLi-sx-li {{shaixuan.zhuangxiu==index?"on":""}}' wx:for="{{pageConfig.decoratetag}}" wx:for-item="decoratetag" catchtap='shaixuanOne' data-type='4' data-index="{{index}}">{{decoratetag.tag_name}}</view></view></block></scroll-view><!-- 底部悬浮 --><view class='newHouseMaskLi-sx-btn flex' style='z-index:999'><view class='newHouseMaskLi-sx-btn-cancle' catchtap='cancle'>清空</view><view class='newHouseMaskLi-sx-btn-confirm' catchtap='confirm'>确定</view></view></view><!-- 排序 --><scroll-view scroll-y class='newHouseMaskLi newHouseMaskLi-price' wx:if="{{tabid==4?true:false}}" catchtap="prevent"><block wx:for="{{pageConfig.paixu}}" wx:for-index="paixuI"><view class='newHouseMaskLi-price-li {{paixuI==paixuIndex?"on":""}}' data-index="{{paixuI}}" catchtap='clickSelectOne'>{{item.tag_name}}</view></block></scroll-view>
</view>

3.2wxss

/* 列表筛选 */.newHouseTabOut {width: 100%;height: 80rpx;
}.newHouseTab {width: 100%;height: 80rpx;box-sizing: border-box;padding: 0 24rpx;background-color: #f6f6f6;z-index: 999;
}.fixedTop {position: fixed;top: 0;left: 0;
}.newHouseTabLi {width: 156rpx;margin-right: 20rpx;
}.newHouseTabLi-msg {font-size: 26rpx;color: #404040;line-height: 75rpx;
}.newHouseTabLi-sj {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAICAYAAAAftBSpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjExMjY5M0EwQzQ4NDExRTlBRjc2QUIxMDJEQjU1QUM4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjExMjY5M0ExQzQ4NDExRTlBRjc2QUIxMDJEQjU1QUM4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTEyNjkzOUVDNDg0MTFFOUFGNzZBQjEwMkRCNTVBQzgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTEyNjkzOUZDNDg0MTFFOUFGNzZBQjEwMkRCNTVBQzgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7j3SwbAAAAVElEQVR42mKcOXOmJwMDw3ogZmcgHWwH4kAmGAOIf5JjAEgfE7oAqQaAOEy4JIg1AN0QYgzCKs+ER+EvYi1gwmNjAJJBeF3IRMDvIIM2EgorgAADACLHHvGu47KWAAAAAElFTkSuQmCC);background-repeat: no-repeat;background-size: 17rpx 8rpx;background-position: center;width: 17rpx;height: 75rpx;margin-left: 10rpx;
}.newHouseTabLi.on .newHouseTabLi-sj {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAICAYAAAAftBSpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5QUEyQjY0QzRBMDExRTlBMjlERTlGQkNGRUY0M0QwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjY5QUEyQjY1QzRBMDExRTlBMjlERTlGQkNGRUY0M0QwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjlBQTJCNjJDNEEwMTFFOUEyOURFOUZCQ0ZFRjQzRDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjlBQTJCNjNDNEEwMTFFOUEyOURFOUZCQ0ZFRjQzRDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz74a4vsAAAAU0lEQVR42mL8X8rgycDAsB6I2RlIB9uBOJAJxgDin+QYANLHhC5AqgEgDhMuCWINQDeEGIOwyjPhUfiLWAuY8NgYgGQQXhcyEfA7yKCNhMIKIMAAaM0emlkSnlEAAAAASUVORK5CYII=);
}.newHouseTabLi.on .newHouseTabLi-msg {color: #ff7500;
}.newHouseTabLi-sx {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk2REY3NzdBQzQ4NTExRTk5MjlDQjlEMUI3NUE2RkYyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk2REY3NzdCQzQ4NTExRTk5MjlDQjlEMUI3NUE2RkYyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTZERjc3NzhDNDg1MTFFOTkyOUNCOUQxQjc1QTZGRjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTZERjc3NzlDNDg1MTFFOTkyOUNCOUQxQjc1QTZGRjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz53yOxpAAABQklEQVR42mJ0cHBgwAMkgVgMiC/CBPbv3w+mHR0dGUgBTHjkkoD4IRBfAOJlONQwQx2xhVyL/IB4FhCzAPF3II4EYjks6niAWA+IbcixyByIl0NdWwXEd6Di/AwUAHSLVIB4MxBzAfF0IO5goBJAtkgUiLdD6U1AnMtARQCziAvqE5CPTkLj5C+1LWKEpipzaHz4AvE3BioDJmjK8QTi10g01QEo+X4GYmMg/gTEjxhoBFig9BUGGgMmBjqBUYtGLQIVAvbIyZsWwAladv4HFXG08pEuEK8DYjYgng3E/2hhkSjUEn5oLVBAizjCWQtQ0yJmaM2MtRagpkWToW0NrLUApRZ9hTZeQPGRCcQ/oT65Q04+ugvEH4D4GRa5P0CcAw2iV0AcDo0bnNUEPhAKxOxQ12MD84B4CRD/huYZrAAgwACzkj6mJZhH0AAAAABJRU5ErkJggg==);background-repeat: no-repeat;background-size: 26rpx 26rpx;background-position: center;width: 50rpx;height: 75rpx;margin-right: 0;
}.newHouseTabLi-sx.on {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg5OUJCODM1QzRBMTExRTk5NTM3Qjc0Mjc3OEI3QjI3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg5OUJCODM2QzRBMTExRTk5NTM3Qjc0Mjc3OEI3QjI3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODk5QkI4MzNDNEExMTFFOTk1MzdCNzQyNzc4QjdCMjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODk5QkI4MzRDNEExMTFFOTk1MzdCNzQyNzc4QjdCMjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SDGLiAAABWUlEQVR42uyWMUvDQBTH36VFIQidKrg4uerikEUQ3Bx0FVc3QaGLGfwEktVB0F03BxX8DN0sONZBBwe7iGJFtJ6/6CsGTarUOxf9wy93JEf+d7l3ec/YNemlERiGRuGIxMp3FPR4tgTncAK7BWNKEpsGHPVrNA/bUIZ7WITRnHFDMAFT/RhFsPc6W5F1aOr9ivxAH43G4BBC2IINcaSsURWOtT2AVXGorlGoK0lXVNc96bg2MhpVke7HHLTFsQKNnFloZVrnSsP3FibhBi7Ek8ranopnBfJL+jf660axiWA6G94+TGb032nph4Enk3Gu+zAAO2Th58CDSVVNKpoFau73iE/0KQsktuPWKDYlzczvWSCxbR9Rt6m1xlsWSGzLZXjfafGS7scyPOhKmv2cozO4hsucZ0+woonyChYwqee9xHxRQHbP2qDOPr+AjE0axo/0C6vJFwEGABS7Tyz9AQr2AAAAAElFTkSuQmCC);
}.w90 {width: 90rpx;
}.wmax130 {max-width: 130rpx;
}.w170 {width: 170rpx;
}.wmax144 {max-width: 144rpx;
}/* 新房列表 */.newHouseUl {padding: 0 36rpx;
}/* 下拉select样式 */.newHouseMask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 990;font-size: 28rpx;
}.newHouseMaskLi {width: 100%;background-color: #fff;padding-top: 80rpx;box-sizing: border-box;position: relative;
}.newHouseMaskLi-locatin, .newHouseMaskLi-price {height: 588rpx;
}.newHouseMaskLi-one {width: 100%;height: 588rpx;
}.bg_e5e5e5 {background-color: #e5e5e5;
}.newHouseMaskLi-oneLi, .newHouseMaskLi-price-li {height: 88rpx;line-height: 88rpx;
}.newHouseMaskLi-price-li {text-align: center;
}.newHouseMaskLi-oneLi {
}.maxw175 {max-width: 175rpx;box-sizing: border-box;padding-left: 50rpx;
}.newHouseMaskLi-oneLi.on, .newHouseMaskLi-price-li.on {background-color: #fff;color: #ff7500;
}.newHouseMaskLi-two, .newHouseMaskLi-three {height: 100%;position: absolute;right: 0;top: 80rpx;
}.newHouseMaskLi-two {width: 575rpx;
}.newHouseMaskLi-three {width: 276rpx;
}.bg_fff {background-color: #fff;
}.newHouseMaskLi-twoLi, .newHouseMaskLi-threeLi {box-sizing: border-box;padding-left: 40rpx;height: 88rpx;line-height: 88rpx;
}.newHouseMaskLi-twoLi.on, .newHouseMaskLi-threeLi.on {color: #ff7500;
}.newHouseMaskLi-twoLi {width: 295rpx;
}.newHouseMaskLi-threeLi {width: 276rpx;
}/* 筛选 */.newHouseMaskLi-sx {height: 100%;padding-left: 24rpx;padding-right: 24rpx;padding-bottom: 95rpx;
}.newHouseMaskLi-sx-title {font-size: 30rpx;color: #404040;height: 82rpx;line-height: 82rpx;
}.newHouseMaskLi-sx-li {float: left;width: 160rpx;height: 60rpx;text-align: center;line-height: 60rpx;font-size: 24rpx;color: #404040;background-color: #f8f8f8;border-radius: 10rpx;margin-right: 20rpx;margin-bottom: 30rpx;
}.newHouseMaskLi-sx-li:nth-child(4), .newHouseMaskLi-sx-li:nth-child(8),
.newHouseMaskLi-sx-li:nth-child(12) {margin-right: 0;
}.newHouseMaskLi-sx-li.on {background-color: #ff7500;color: #fff;
}.newHouseMaskLi-sx-btn {position: fixed;left: 0;bottom: 0;width: 100%;height: 94rpx;border-top: 1rpx solid #e6e6e6;
}.newHouseMaskLi-sx-btn-cancle, .newHouseMaskLi-sx-btn-confirm {flex: 1;text-align: center;line-height: 94rpx;font-size: 36rpx;
}.newHouseMaskLi-sx-btn-cancle {background-color: #fff;color: #212121;
}.newHouseMaskLi-sx-btn-confirm {background-color: #ff7500;color: #fff;
}.max256 {max-height: 256rpx;
}/* 弹性盒子 */
.flex {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;display: box;flex-wrap:wrap;
}.alignC{align-items: center;-webkit-box-align: center;-webkit-align-items: center;-moz-align-items: center;-ms-align-items: center;-o-align-items: center;
}.line1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}.clearfix:before, .clearfix:after {content: '.';display: block;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;
}
.clearfix:after {clear: both;
}
.clearfix {zoom: 1;
}

3.3js

var commonData = require('data.js');
Page({/*** 页面的初始数据*/data: {maskFlag: false, // 蒙层// tab （0-4）分别为：位置，价格，户型，筛选，排序tabid: -1,// 位置// 位置的一级菜单location: {locationOneArr: [{id: 0,tag_name: '不限'}, {id: 1,tag_name: '区域'}, {id: 2,tag_name: '板块'}, {id: 3,tag_name: '地铁'}],// 位置的名字（并记录位置，再次展开时使用）locationName: {name: '',oneIndex: 0, // 记录第一级菜单当前为第几个twoIndex: -1, // 二级菜单当前为第几个threeIndex: -1 // 三级菜单当前为第几个},locationOneIndex: 0, // 以及菜单为第几个（渲染使用）// 位置的二级菜单（渲染使用）locationTwoIndex1: -1, // 区域locationTwoIndex2: -1, // 板块locationTwoIndex3: -1, // 地铁// 三级菜单locationThreeIndex: -1, // 地铁},// 配置接口（数据）pageConfig: {district: [], // 区域block: [], // 板块metro: [], // 地铁price: [], // 价格recommendTag: [], // 特色channel: [], // 类型mjtag: [], // 面积kptag: [], // 开盘时间decoratetag: [], // 装修paixu: [] // 排序},priceIndex: -1, // 价格roomtagIndex: -1, // 户型// 筛选shaixuan: {tese: [], // 特色：选中的idleixing: -1, // 类型：选中的index（因为需要判断是否选中，所以用的index而不是id，下同理）mianji: [], // 面积：选中的idkaipan: -1, // 开盘时间：选中的indexzhuangxiu: -1, // 装修：选中的index},paixuIndex: -1, // 排序：选中的index},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {// 获取数据this.getConfig();},// tab切换（列表顶部的tab切换） tab(e) {var that = this;var tabid = e.currentTarget.dataset.id;that.setData({maskFlag: true,tabid: tabid});// 位置（需要判断，之前是否有选过的，如果有则切到当前选中的状态的界面）var locationName_name = that.data.location.locationName.name;var locationName_oneIndex = that.data.location.locationName.oneIndex;var locationName_twoIndex = that.data.location.locationName.twoIndex;var locationName_threeIndex = that.data.location.locationName.threeIndex;if (locationName_name) {// 把区域和板块相同的部分提取一下if ((locationName_oneIndex == 1 && locationName_twoIndex > -1) || (locationName_oneIndex == 2 && locationName_twoIndex > -1)) {that.setData({'location.locationTwoIndex3': -1,'location.locationThreeIndex': -1,})}// 区域if (locationName_oneIndex == 1 && locationName_twoIndex > -1) {that.setData({'location.locationOneIndex': locationName_oneIndex,'location.locationTwoIndex1': locationName_twoIndex,'location.locationTwoIndex2': -1,})}// 板块if (locationName_oneIndex == 2 && locationName_twoIndex > -1) {that.setData({'location.locationOneIndex': locationName_oneIndex,'location.locationTwoIndex1': -1,'location.locationTwoIndex2': locationName_twoIndex,})}// 地铁if (locationName_oneIndex == 3 && locationName_twoIndex > -1 && locationName_threeIndex > -1) {that.setData({'location.locationOneIndex': locationName_oneIndex,'location.locationTwoIndex1': -1,'location.locationTwoIndex2': -1,'location.locationTwoIndex3': locationName_twoIndex,'location.locationThreeIndex': locationName_threeIndex,})}}},// mask隐藏maskClick() {var that = this;that.setData({maskFlag: false});},// 阻止事件冒泡prevent() { },// 位置：点击一级菜单clickLocationOne(e) {var that = this;var index = e.currentTarget.dataset.index;that.setData({'location.locationOneIndex': index,});// 如果点击不限（清空locationName，初始化二级三级状态）if (index == 0) {that.setData({'maskFlag': false,'location.locationTwoIndex1': -1,'location.locationTwoIndex2': -1,'location.locationTwoIndex3': -1,'location.locationThreeIndex': -1,'location.locationName.name': '','location.locationName.oneIndex': 0,'location.locationName.twoIndex': -1,'location.locationName.threeIndex': -1,});// 重新请求数据}},// 位置：点击二级菜单clickLocationTwo(e) {var that = this;// 积极菜单var type = e.currentTarget.dataset.type;// 当前第几个var index = e.currentTarget.dataset.index;// 名字var name = e.currentTarget.dataset.name;// 虽然同为2级，地铁的二级和其它的二级不同，需要区分// 把区域和板块相同部分合并一下if ((type == 1) || (type == 2)) {that.setData({'location.locationTwoIndex3': -1,'location.locationThreeIndex': -1,'location.locationName.name': name,'location.locationName.oneIndex': type,'location.locationName.twoIndex': index,'location.locationName.threeIndex': -1,'maskFlag': false,});}if (type == 1) {that.setData({'location.locationTwoIndex1': index,'location.locationTwoIndex2': -1,});// 重新请求数据}if (type == 2) {that.setData({'location.locationTwoIndex1': -1,'location.locationTwoIndex2': index,});// 重新请求数据}if (type == 3) {that.setData({'location.locationTwoIndex3': index});if (that.data.location.locationName.twoIndex == that.data.location.locationTwoIndex3) {that.setData({'location.locationThreeIndex': that.data.location.locationName.threeIndex});} else {that.setData({'location.locationThreeIndex': -1});}}},// 三级菜单点击(当前只按照地铁有三级菜单来写的)clickLocationThree(e) {var that = this;var index = e.currentTarget.dataset.index;var name = e.currentTarget.dataset.name;var type = e.currentTarget.dataset.type;var locationTwoIndex3 = that.data.location.locationTwoIndex3;that.setData({'location.locationThreeIndex': index,'location.locationName.oneIndex': type,'location.locationName.twoIndex': locationTwoIndex3,'location.locationName.threeIndex': index,'location.locationTwoIndex1': -1,'location.locationTwoIndex2': -1,'maskFlag': false});if (index) {that.setData({'location.locationName.name': name,});} else {that.setData({'location.locationName.name': that.data.pageConfig.metro[that.data.location.locationTwoIndex3].name,});}// 重新请求数据},// 价格，户型，排序clickSelectOne(e) {var that = this;// 1:价格；2：户型；4：排序var tabid = that.data.tabid;var index = e.currentTarget.dataset.index;if (tabid == 1) {that.setData({'priceIndex': index,});}if (tabid == 2) {that.setData({'roomtagIndex': index,});}if (tabid == 4) {that.setData({'paixuIndex': index,});}// 重新请求数据that.setData({'maskFlag': false});},// 筛选shaixuanOne(e) {// 1:类型；3：开盘时间；4：装修var that = this;var type = e.currentTarget.dataset.type;var index = e.currentTarget.dataset.index;if (type == 1) {that.setData({'shaixuan.leixing': index});}if (type == 3) {that.setData({'shaixuan.kaipan': index});}if (type == 4) {that.setData({'shaixuan.zhuangxiu': index});}},shaixuanTwo(e) {// 0:特色；2：面积；var that = this;var type = e.currentTarget.dataset.type;var index = e.currentTarget.dataset.index;var id = e.currentTarget.dataset.id;if (type == 0) {var key = 'pageConfig.recommendTag[' + index + '].flag';var flag = !that.data.pageConfig.recommendTag[index].flag;var tese = that.data.shaixuan.tese;if (flag) {if (tese.indexOf(id) < 0) {tese.push(id)}} else {if (tese.indexOf(id) > -1) {tese.splice(tese.indexOf(id), 1)}}that.setData({'shaixuan.tese': tese,[key]: flag});}if (type == 2) {var key = 'pageConfig.mjtag[' + index + '].flag';var flag = !that.data.pageConfig.mjtag[index].flag;var mianji = that.data.shaixuan.mianji;if (flag) {if (mianji.indexOf(id) < 0) {mianji.push(id)}} else {if (mianji.indexOf(id) > -1) {mianji.splice(mianji.indexOf(id), 1)}}that.setData({'mianji.tese': mianji,[key]: flag});}},// 取消和确认按钮cancle(e) {var that = this;var recommendTag = that.data.pageConfig.recommendTag.length ? that.data.pageConfig.recommendTag : [];var mjtag = that.data.pageConfig.mjtag.length ? that.data.pageConfig.mjtag : [];for (var i = 0; i < recommendTag.length; i++) {recommendTag[i]['flag'] = 0}for (var j = 0; j < mjtag.length; j++) {mjtag[j]['flag'] = 0}that.setData({shaixuan: {tese: [],leixing: -1,mianji: [],kaipan: -1,zhuangxiu: -1,},"pageConfig.recommendTag": recommendTag,"pageConfig.mjtag": mjtag,'maskFlag': false});// 冲洗请求数据},// 确认confirm(e) {// 搜索并关闭蒙层var that = this;// 重新请求数据that.setData({'maskFlag': false});},//请求配置getConfig: function() {var that = this;// 获取数据var res = commonData.get_data();// 对数据的处理var district = res.district.length ? res.district : [];var block = res.block.length ? res.block : [];var metro = res.metro.length ? res.metro : [];for (var i = 0; i < metro.length; i++) {if (metro[i].station.length) {metro[i].station.unshift({id: 0,name: '不限'});}}var price = res.price.length ? res.price : [];price.unshift({id: 0,tag_name: '不限'});var roomtag = res.roomtag.length ? res.roomtag : [];roomtag.unshift({tag_id: 0,tag_name: '不限'});// 筛选var recommendTag = res.recommendTag.length ? res.recommendTag : [];var channel = res.channel.length ? res.channel : [];var mjtag = res.mjtag.length ? res.mjtag : [];var kptag = res.kptag.length ? res.kptag : [];var decoratetag = res.decoratetag.length ? res.decoratetag : [];for (var i = 0; i < recommendTag.length; i++) {recommendTag[i]['flag'] = 0}for (var j = 0; j < mjtag.length; j++) {mjtag[j]['flag'] = 0}// 默认排序，价格由高到低，价格由低到高，关注度由高到低，开盘时间由近到远var paixu = [{tag_id: 0,tag_name: '默认排序',}, {tag_id: 2,tag_name: '价格由高到低',}, {tag_id: 3,tag_name: '价格由低到高',}, {tag_id: 6,tag_name: '关注度由高到低',}, {tag_id: 4,tag_name: '开盘时间由近到远',}];that.setData({'pageConfig.district': district,'pageConfig.block': block,'pageConfig.metro': metro,'pageConfig.price': price,'pageConfig.roomtag': roomtag,'pageConfig.recommendTag': recommendTag,'pageConfig.channel': channel,'pageConfig.mjtag': mjtag,'pageConfig.kptag': kptag,'pageConfig.decoratetag': decoratetag,'pageConfig.paixu': paixu,});},// 参数getparam() {var that = this;var param = {};if (that.data.location.locationName.name) {// 区域if (that.data.location.locationName.oneIndex == 1) {if (that.data.location.locationName.twoIndex > -1) {param.dist = that.data.pageConfig.district[that.data.location.locationName.twoIndex].id;}}// 板块if (that.data.location.locationName.oneIndex == 2) {if (that.data.location.locationName.twoIndex > -1) {param.block = that.data.pageConfig.block[that.data.location.locationName.twoIndex].id;}}// 地铁if (that.data.location.locationName.oneIndex == 3) {if (that.data.location.locationName.twoIndex > -1) {if (that.data.location.locationName.threeIndex > -1) {param.dttype_id = that.data.pageConfig.metro[that.data.location.locationName.twoIndex].id;param.dttag_id = that.data.pageConfig.metro[that.data.location.locationName.twoIndex].station[that.data.location.locationName.threeIndex].id;}}}}// 价格if (that.data.priceIndex > -1) {param.price = that.data.pageConfig.price[that.data.priceIndex].id;}// 户型if (that.data.roomtagIndex > -1) {param.roomtag_id = that.data.pageConfig.roomtag[that.data.roomtagIndex].tag_id;}// 特色if (that.data.shaixuan.tese.length) {param.tag_id = that.data.shaixuan.tese.join(',')}// 类型if (that.data.shaixuan.leixing > -1) {param.p = that.data.pageConfig.channel[that.data.shaixuan.leixing].id;}// 面积if (that.data.shaixuan.mianji.length) {param.mjtagid = that.data.shaixuan.mianji.join(',');}// 开盘时间if (that.data.shaixuan.kaipan > -1) {param.kptagid = that.data.pageConfig.kptag[that.data.shaixuan.kaipan].tag_id;}// 装修if (that.data.shaixuan.zhuangxiu > -1) {param.decoratetagid = that.data.pageConfig.decoratetag[that.data.shaixuan.zhuangxiu].tag_id;}// 排序if (that.data.paixuIndex > -1) {param.ordered = that.data.pageConfig.paixu[that.data.paixuIndex].tag_id;}return param;},
})

3.4 data.js

function get_data() {var listaa = { channel: [{ id: 1, tag_name: "住宅" }, { id: 2, tag_name: "写字楼" }, { id: 3, tag_name: "别墅" }, { id: 4, tag_name: "商业" }, { id: 5, tag_name: "公寓" }], block: [], district: [{ id: 1, tag_name: "滨湖区" }, { id: 2, tag_name: "惠山区" }, { id: 3, tag_name: "锡山区" }, { id: 4, tag_name: "梁溪区" }, { id: 7, tag_name: "新吴区" }, { id: 8, tag_name: "江阴" }, { id: 9, tag_name: "宜兴" }, { id: 99, tag_name: "其他" }], price: [{ id: 1, tag_name: "10000元/㎡以下" }, { id: 2, tag_name: "10000-12000元/㎡" }, { id: 3, tag_name: "12000-14000元/㎡" }, { id: 4, tag_name: "14000-16000元/㎡" }, { id: 5, tag_name: "16000-18000元/㎡" }, { id: 6, tag_name: "18000-20000元/㎡" }, { id: 7, tag_name: "20000-25000元/㎡" }, { id: 8, tag_name: "25000-30000元/㎡" }, { id: 9, tag_name: "30000元/㎡以上" }], dist_xy: [{ id: 1, name: "滨湖区" }, { id: 2, name: "惠山区" }, { id: 3, name: "锡山区" }, { id: 4, name: "梁溪区" }, { id: 7, name: "新吴区" }, { id: 8, name: "江阴" }, { id: 9, name: "宜兴" }], metro: [{ id: "40", name: "地铁一号线", station: [{ count: "22", id: "491", name: "堰桥站" }, { count: "4", id: "492", name: "锡北运河站" }, { count: "9", id: "493", name: "西漳站" }, { count: "9", id: "494", name: "天一站" }, { count: "2", id: "495", name: "庄前站" }, { count: "6", id: "496", name: "民丰站" }, { count: "8", id: "508", name: "塘铁桥站" }, { count: "7", id: "509", name: "金匮公园站" }, { count: "17", id: "510", name: "市民中心站" }, { count: "6", id: "511", name: "文化宫站" }, { count: "9", id: "512", name: "江南大学站" }, { count: "2", id: "513", name: "长广溪站" }, { count: "2", id: "1935", name: "刘潭站" }, { count: "2", id: "6083", name: "南方泉站（在建）" }, { count: "1", id: "6081", name: "葛埭桥站（在建）" }, { count: "1", id: "6079", name: "雪浪坪站（在建）" }] }, { id: "53", name: "地铁二号线", station: [{ count: "1", id: "835", name: "梅园开原寺站" }] }, { id: "311", name: "地铁三号线（建设中）", station: [{ count: "4", id: "6037", name: "苏庙站" }, { count: 0, id: "6039", name: "钱桥站" }, { count: "5", id: "6041", name: "龙山梢站" }, { count: 0, id: "6043", name: "石门路站" }] }, { id: "363", name: "地铁四号线（建设中）", station: [{ count: "7", id: "6145", name: "刘潭站" }, { count: "2", id: "6147", name: "广石路站" }, { count: "2", id: "6149", name: "黄巷站" }] }], recommendTag: [{ tag_id: "1691", tag_name: "投资地产" }, { tag_id: "1703", tag_name: "低密居所" }, { tag_id: "11323", tag_name: "小户型" }, { tag_id: "50169", tag_name: "品牌房企" }, { tag_id: "50529", tag_name: "现房" }], decoratetag: [{ tag_id: "20323", tag_name: "毛坯" }, { tag_id: "56251", tag_name: "带装修" }], roomtag: [{ tag_id: "8", tag_name: "一室" }, { tag_id: "9", tag_name: "二室" }, { tag_id: "10", tag_name: "三室" }, { tag_id: "11", tag_name: "四室" }, { tag_id: "21", tag_name: "五室" }, { tag_id: "22", tag_name: "六室" }], kptag: [{ tag_id: "1", tag_name: "本月开盘" }, { tag_id: "2", tag_name: "下月开盘" }, { tag_id: "3", tag_name: "三月内开盘" }, { tag_id: "4", tag_name: "六月内开盘" }, { tag_id: "5", tag_name: "前三个月已开" }, { tag_id: "6", tag_name: "前六个月已开" }], mjtag: [{ tag_id: "1", tag_name: "60㎡以下" }, { tag_id: "2", tag_name: "60-80㎡" }, { tag_id: "3", tag_name: "80-100㎡" }, { tag_id: "4", tag_name: "100-120㎡" }, { tag_id: "5", tag_name: "120-140㎡" }, { tag_id: "6", tag_name: "140-160㎡" }, { tag_id: "7", tag_name: "160-200㎡" }, { tag_id: "8", tag_name: "200-300㎡" }, { tag_id: "9", tag_name: "300㎡以上" }], nearbytag: [{ id: "1", name: "1km", conf: "1000" }, { id: "2", name: "2.5km", conf: "2500" }, { id: "3", name: "5km", conf: "5000" }, { id: "4", name: "10km", conf: "10000" }], zjtag: [{ tag_id: "59699", tag_name: "50万以下" }, { tag_id: "59701", tag_name: "50万-100万" }, { tag_id: "59703", tag_name: "100万-150万" }, { tag_id: "59705", tag_name: "150万-200万" }, { tag_id: "59707", tag_name: "200万-300万" }, { tag_id: "59711", tag_name: "300万-400万" }, { tag_id: "59713", tag_name: "400万-500万" }, { tag_id: "59715", tag_name: "500万以上" }] }return listaa
}module.exports = {get_data: get_data,}

3.5 效果

4.说明

4.1 写的比较糙，仅做参考使用

4.2 关键点：使用两套变量

小程序自定制从顶部弹出的picker，模拟贝壳找房相关推荐

微信小程序拒绝授权后不弹出
在微信小程序中,如果用户在小程序中拒绝过授权,下次再请求时是不会再次弹出授权窗口的. 所以需要先判断授权状态,手动弹出授权提醒 const mapInfo = () => {return new ...
微信小程序页面跳转、弹出框
一.页面跳转页面跳转是微信小程序中使用较为频繁并且很重要的功能之一,页面跳转一般是通过点击按钮或者文本区域后需要进行的操作. 页面跳转中需要注意的点很多,我在这就介绍一些我在写项目过程中所遇到的一些 ...
夜神模拟器抓包微信小程序（进入浏览器，弹出安全警告（安全证书有问题解决方法）
1.声明:本文仅限学习研究讨论,切忌做非法乱纪之事! 即使按照其它教程的安装证书,也只是把证书安装到了用户下面,然而安卓高版本(7.0)之后呢,app可以只信任指定证书和系统内置的证书,后续用户安装的 ...
微信小程序点击按钮实现弹出模态框
效果如下图 wxml如下: <button bindtap="popup">弹出</button><view cl ...
微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
微信小程序简易实现模态框弹出框方法代码
方法如下介绍 wxml代码 Javacript代码 wxss样式介绍可以将showModal和hideModal内的方法交换从而改变弹出框方向,但要注意showModalStatus在两个函数内 ...
小程序实现长按图片弹出保存图片、发送给朋友、识别图中码菜单。
1.在image标签上设置show-menu-by-longpress为true
vant-Weapp实现省市区三级联动顶部弹出列表
准备:利用vant weapp做的顶部弹出的省市区三级联动对话框 1.下载区域:arrea.js,放到utils备用 // 三级联动省市区 export default {province_list: ...
小程序 ios 全面屏底部留出安全距离
小程序 ios 全面屏底部留出安全距离问题描述对于苹果手机,底部有安全距离,一些底部会有遮挡,当然可以通过过去系统信息动态设置底部距离.下面提供一个用 css 设置底部安全距离的方案解决方案苹 ...

小程序自定制从顶部弹出的picker，模拟贝壳找房

小程序自定制从顶部弹出的picker，模拟贝壳找房相关推荐

最新文章

热门文章