<view> <view> <view bindtap="listqy" data-nav="1"> <view>{{city}}</view> <view></view> </view> <view bindtap="list" data-nav="2"> <view>{{city1}}</view> <view></view> </view> <view bindtap="listpx" data-nav="3"> <view>{{model}}</view> <view></view> </view> </view> <view> <view> <view wx:for="{{cityleft}}" bindtap="selectleft" data-city='{{index}}' wx:key="unique"> {{index}} </view> </view> <view> <view wx:for="{{citycenter}}" bindtap="selectcenter" data-city='{{index}}' wx:key="unique"> {{index}} </view> </view> <view> <view wx:for="{{cityright}}" wx:key="unique" bindtap='selectcity' data-city='{{index}}'> {{item}} </view> </view> </view> <view> <view> <view> <view> <text>已选地区 </text> </view> <view> <view bindtap='emptyallendcity'> <text>清空</text> </view> </view> </view> <view> <block wx:for="{{endcitys}}" wx:key="index"> <view bindtap='emptyitem' data-endcity='{{index}}'>{{item}}</view> </block> </view> <view> <view> <text>选择：{{endselect}}</text> </view> <block wx:if="{{displaycity!=0}}"> <view> <view bindtap='returnupper'> <text>返回上一级</text> </view> </view> </block> </view> <block wx:if="{{displaycity==0?true:false}}"> <view> <block wx:for="{{cityleft}}" wx:key="unique"> <view data-city='{{index}}' bindtap='selectsdbitem'> {{index}}</view> </block> </view> </block> <block wx:if="{{displaycity==1?true:false}}"> <view> <block wx:for="{{endkeys}}" wx:key="unique"> <view data-city='{{index}}' bindtap='selectsdbendkey'> {{index}}</view> </block> </view> </block> <block wx:if="{{displaycity==2?true:false}}"> <view> <block wx:for="{{town}}" wx:key="unique"> <view data-city='{{item}}' bindtap='selectcityend'> {{item}}</view> </block> </view> </block> </view> <view bindtap='determineend'> <text>确定</text> </view> </view> <view> <view> <view> <view> <text>车长</text> </view> </view> <view> <block wx:for="{{commanders}}" wx:key="unique"> <view data-commander='{{item}}' bindtap='selectcmditem'> {{item}}</view> </block> </view> <view> <view> <text>车型</text> </view> </view> <view> <block wx:for="{{models}}" wx:key="unique"> <view data-model='{{item}}' bindtap='selectmdlitem'> {{item}}</view> </block> </view> </view> <view bindtap='determinecar'> <text>确定</text> </view> </view> <view bindtap="hidebg"></view> </view>
wxss
.page { font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif; width: 100%; position:fixed; background: #fff; overflow: hidden; } .nav { position: relative; z-index: 99; display: flex; border-top: 1px solid #d1d3d4; border-bottom: 1px solid #d1d3d4; background: #fff; } .nav-son { display: flex; flex: 1; text-align: center; height: 40px; align-items: center; justify-content: center; font-size: 14px; } .borders { border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .content { display: inline-block; } .icon { display: inline-block; border: 4px solid transparent; border-top: 4px solid #9b9b9b; margin-left: 5px; } .temp { position: relative; z-index: 4; font-size: 14px; } .temp1 { display: flex; width: 100%; height: 1150rpx; overflow-y: scroll; background: #fff; color: #666; } .slidedown { transform: translateY(0%); } .quyu { position: relative; display: none; height: 750rpx; z-index: 5; } .quyu .qy { overflow-y: scroll; float: left; width: 33.33%; height: 750rpx; line-height: 80rpx; box-sizing: border-box; font-size: 14px; color: #717273; } .qy view { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 15rpx; } .quyu-left { background: #c5c5c5; } .quyu-center { background: #e0e0e0; } .quyu-right { background: #fff; } .quyu-right view { border-bottom: 1px solid #c5c5c5; } .current { background: #e0e0e0; } .current2 { background: #fff; } .fullbg { position: fixed; top: 0; z-index: 1; width: 100%; height: 100%; background: rgb(1, 1, 1); transition: all 2s; opacity: 0; } .fullopacity { opacity: 0.2; } .nav-son.active .content { color: #fa871e; } .nav-son.active .icon { border-bottom: 4px solid #fa871e; border-top: 0; } @keyframes slidown { from { transform: translateY(-100%); } to { transform: translateY(0%); } } .slidown { display: block; animation: slidown 0.2s ease-in both; } @keyframes slidup { from { transform: translateY(0%); } to { transform: translateY(-100%); } } .tempheight { height: 1020rpx; overflow-y: scroll; } .slidup { display: block; animation: slidup 0.2s ease-in both; } .disappear { display: none; } .slidowntop { display: flex; flex-direction: row; padding: 20rpx 24rpx 10rpx 24rpx; } .emptyall { margin-left: 475rpx; color: #fa871e; } .emptyallright { width: 80rpx; text-align: center; } .endselect { width: 350rpx; text-align: left; } .return { margin-left: 200rpx; color: #fa871e; } .slidowncenter { margin-top: 20rpx; padding-top: 20rpx; padding-left: 24rpx; display: flex; flex-direction: row; align-content: space-between; border-top: solid #d1d3d4 1rpx; } .slidownbottom { margin-top: 10rpx; padding: 10rpx; display: flex; flex-direction: row; flex-wrap: wrap; } .sdbitem { width: 119rpx; text-align: center; border: solid #ccc 1rpx; margin: 12rpx; justify-content: space-between; padding: 12rpx 19rpx 12rpx 19rpx; } .emptyendcitys { padding-left: 12rpx; display: flex; flex-direction: row; flex-wrap: wrap; } .emptyendcitysitem { width: 120rpx; text-align: center; border: solid #ccc 1rpx; margin: 10rpx; justify-content: space-between; padding: 12rpx 18rpx 12rpx 18rpx; } .queding { width: 100%; height: 100rpx; background-color: #fa871e; color: #fff; text-align: center; } .queding { font-size: 18px; line-height: 100rpx; } .temp2 { width: 100%; height: 1150rpx; overflow-y: scroll; background: #fff; color: #666; } .commanders{ padding: 10rpx; display: flex; flex-direction: row; flex-wrap: wrap; } .sdbitem.active{ color: #fa871e; background-color: #F1E6B8; }
city.js文件