WePY简介

1.Wepy是支持微信小程序组件化开发的框架，开发风格接近Vue.js，支持使用第三方npm资源。WePY官网地址微信小程序文档

效果图代码selectaddress.wpystyle.select-area{background:rgba(0,0,0,0.4);width:100%;height:100%;position:fixed;top:0;}.select-area-hide{opacity:0;position:absolute;top:0;bottom:640rpx;width:100%;}.select-area-head{width:100%;height:140rpx;background:white;position:absolute;bottom:500rpx;}.select-area-head-title{width:100%;height:80rpx;text-align:center;line-height:80rpx;color:black;font-size:34rpx;}.select-area-head-tab{display:flex;margin-top:0;width:100%;height:59rpx;flex-direction:row;justify-content:flex-start;align-items:center;border-bottom:1rpxsolid#EEEEEE;}.select-area-head-tab-item{margin-left:30rpx;height:60rpx;line-height:60rpx;font-size:30rpx;}.active{color:#FD8069;border-bottom:1rpxsolid#FD8069;}.select-area-body{position:absolute;bottom:0;height:500rpx;background:white;width:100%;}.select-area-body-item{width:100%;height:499rpx;}.address-item{width:400rpx;margin-left:30rpx;height:80rpx;font-size:30rpx;color:#999999;line-height:80rpx;text-align:left;}/styletemplateviewclass="select-area"hidden="{{!showcomp}}"viewclass="select-area-hide"@tap="hideSelectArea"/viewviewclass="select-area-head"viewclass="select-area-head-title"请选择/viewviewclass="select-area-head-tab"viewclass="select-area-head-tab-item{{actives[0]}}"@tap="itemChange(0)"{{addressItemArr[0]}}/viewviewclass="select-area-head-tab-item{{actives[1]}}"@tap="itemChange(1)"{{addressItemArr[1]}}/viewviewclass="select-area-head-tab-item{{actives[2]}}"@tap="itemChange(2)"{{addressItemArr[2]}}/view/view/viewswiperclass="select-area-body"current="{{currentItem}}"duration="{{duration}}"@change="swiperChange"swiper-itemscroll-viewscroll-y="true"class="select-area-body-item"repeatfor="{{arr1}}"key="index"index="index"item="item"viewclass="address-item"@tap="scrollNext({{item}})"{{item.name}}/view/repeat/scroll-view/swiper-itemswiper-itemwx:if="{{addressItemArr[1].length0}}"scroll-viewscroll-y="true"class="select-area-body-item"repeatfor="{{arr2}}"key="index"index="index"item="item"viewclass="address-item"@tap="scrollNext({{item}})"{{item.name}}/view/repeat/scroll-view/swiper-itemswiper-itemwx:if="{{addressItemArr[2].length0}}"scroll-viewscroll-y="true"class="select-area-body-item"repeatfor="{{arr3}}"key="index"index="index"item="item"viewclass="address-item"@tap="scrollNext({{item}})"{{item.name}}/view/repeat/scroll-view/swiper-item/swiper/view/templatescriptimportwepyfrom'wepy'importregionsDatafrom'../utils/regions'lettempCities=[]letgetProvinces=function(){letregions=regionsData.regionsletprovinces=[]regions.forEach(function(item){provinces.push({code:item.code,name:item.name})})returnprovinces}letgetCities=function(provinceCode){letregions=regionsData.regionsletcities=[]letprovince=nullfor(leti=0;iregions.length;i++){province=regions[i]if(province.code==provinceCode){tempCities=province.citiestempCities.forEach(function(item){cities.push({code:item.code,name:item.name})})break}}returncities}letgetAreas=function(cityCode){letareas=[]letcity=nullfor(leti=0;itempCities.length;i++){city=tempCities[i]if(city.code==cityCode){areas=city.areasbreak}}returnareas}exportdefaultclassSelectAddressextendswepy.component{data={duration:500,actives:['active','',''],addressItemArr:['请选择','',''],currentItem:0,selectItemArr:[],arr1:[],arr2:[],arr3:[]}props={showcomp:Boolean}watch={currentItem(newVal,oldVal){if(newVal==0){this.actives=['active','','']}elseif(newVal==1){this.actives=['','active','']}elseif(newVal==2){this.actives=['','','active']}this.$apply()},showcomp(newVal,oldVal){console.log('showcomp',newVal)}}methods={scrollNext(item){if(this.currentItem==0){this.addressItemArr=[item.name,'请选择','']this.selectItemArr=[item]this.arr2=getCities(item.code)}elseif(this.currentItem==1){this.addressItemArr[1]=item.namethis.addressItemArr[2]='请选择'this.selectItemArr.length=2this.selectItemArr.splice(1,1,item)this.arr3=getAreas(item.code)}elseif(this.currentItem==2){this.addressItemArr[2]=item.namethis.selectItemArr.length=3this.selectItemArr.splice(2,1,item)this.$emit('getAddress',this.selectItemArr)}if(this.currentItem2){this.currentItem++}this.$apply()},swiperChange(evt){if(evt.detail.source=='touch'){this.currentItem=evt.detail.current}},itemChange(index){this.currentItem=indexthis.$apply()},hideSelectArea(){this.$emit('hideSelectArea')}}onLoad(){this.arr1=getProvinces()this.$apply()}}/scriptregions.js'usestrict'constregions=[{code:"110000",name:"北京市",cities:[{code:"110100",name:"北京市",areas:[{code:"110101",name:"东城区"},{code:"110102",name:"西城区"},{code:"110105",name:"朝阳区"},{code:"110106",name:"丰台区"},{code:"110107",name:"石景山区"},{code:"110108",name:"海淀区"},{code:"110109",name:"门头沟区"},{code:"110111",name:"房山区"},{code:"110112",name:"通州区"},{code:"110113",name:"顺义区"},{code:"110114",name:"昌平区"},{code:"110115",name:"大兴区"},{code:"110116",name:"怀柔区"},{code:"110117",name:"平谷区"},{code:"110228",name:"密云县"},{code:"110229",name:"延庆县"}]}]},{code:"130000",name:"河北省",cities:[{code:"130100",name:"石家庄市",areas:[{code:"130102",name:"长安区"},{code:"130103",name:"桥东区"},{code:"130104",name:"桥西区"},{code:"130105",name:"新华区"},{code:"130107",name:"井陉矿区"},{code:"130108",name:"裕华区"},{code:"130121",name:"井陉县"},{code:"130123",name:"正定县"},{code:"130124",name:"栾城县"},{code:"130125",name:"行唐县"},{code:"130126",name:"灵寿县"},{code:"130127",name:"高邑县"},{code:"130128",name:"深泽县"},{code:"130129",name:"赞皇县"},{code:"130130",name:"无极县"},{code:"130131",name:"平山县"},{code:"130132",name:"元氏县"},{code:"130133",name:"赵县"},{code:"130181",name:"辛集市"},{code:"130182",name:"藁城市"},{code:"130183",name:"晋州市"},{code:"130184",name:"新乐市"},{code:"130185",name:"鹿泉市"}]},{code:"131000",name:"廊坊市",areas:[{code:"131002",name:"安次区"},{code:"131003",name:"广阳区"},{code:"131022",name:"固安县"},{code:"131023",name:"永清县"},{code:"131024",name:"香河县"},{code:"131025",name:"大城县"},{code:"131026",name:"文安县"},{code:"131028",name:"大厂回族自治县"},{code:"131081",name:"霸州市"},{code:"131082",name:"三河市"}]}]}}];module.exports={regions:regions};使用addresspage.wpystyle.address{width:100%;height:100rpx;text-align:center;line-height:100rpx;color:#999999;font-size:34rpx;margin-top:200rpx;}.btn{width:210rpx;height:80rpx;border-radius:10rpx;margin-top:360rpx;margin-left:270rpx;text-align:center;line-height:80rpx;font-size:32rpx;color:white;background:#FD8069;}/styletemplateviewclass="address"{{address}}/viewviewclass="btn"@tap="selectAddress"选择地址/viewsa:showcomp.sync="showSelectArea"@getAddress.user="getAddress"@hideSelectArea.user="hideSelectArea"/sa/templatescriptimportwepyfrom'wepy'importSelectAddressfrom'@/components/selectaddress'exportdefaultclassAddressPageextendswepy.page{components={sa:SelectAddress}data={showSelectArea:false,address:'北京市海淀区西二旗'}methods={selectAddress(){this.showSelectArea=truethis.$apply()},getAddress(arg,evt){this.showSelectArea=falseletaddress=''for(leti=0;iarg.length;i++){address+=''+arg[i].name}this.address=addressthis.$apply()},hideSelectArea(){this.showSelectArea=falsethis.$apply()}}onLoad(){}}/script待优化的问题在选择地区时swiper-item的切换是刷新，而没有左右滚动动画目前选择地区只支持三级选择

2.关于第一个问题望路过的大神指点，给出更好的解决方案