wxml
<view class="container">
<!-- search -->
<view class="search-bar">
<image src="/static/images/chooseAddr/search.png" class="search-img"></image>
<input type="text" value='{{inputVal}}' bindinput='getValue' placeholder='城市名/拼音' placeholder-class="placeholder"></input>
</view>
<!-- 搜索結(jié)果列表 -->
<view class='list-detail' wx:if="{{searchList.length>0}}">
<scroll-view scroll-y="true" style="height:100%;">
<view class='item-nav' wx:for="{{searchList}}" catchtap='getCity' data-items="{{item}}" wx:key="key">
<view class='title'>{{item.city_name}}</view>
</view>
</scroll-view>
</view>
<!-- 城市列表 -->
<view class='list-city' wx:if="{{searchList.length==0}}">
<scroll-view scroll-y="true" style="height:100%;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
<view class='item fullname region'>
<view style="color:#333">
<view style="display:inline-block;padding:26rpx 0;" catchtap="getCity" data-items="{{current_city}}">當(dāng)前城市：
<view class="top-now">
<image src="/static/images/chooseAddr/ic02.png" class="now-img"></image>{{city}}
</view>
</view>
</view>
</view>
<!-- 全部 -->
<view class='item' wx:for="{{cityList}}" wx:for-index="idx" wx:for-item="group" wx:key="key">
<view class='py' id="{{idx}}">{{idx}}</view>
<view class="fullname" wx:for="{{group}}" wx:key="key" data-items="{{item}}" bindtap='getCity'>{{item.city_name}}</view>
</view>
</scroll-view>
<!-- 首字母 -->
<view class='city-py' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
<view wx:for="{{_py}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{{item}}" class="city-py-item {{showPy==item?'act-city-py':''}}">
{{item}}<view class="showPy" hidden="{{hidden}}" wx:if="{{showPy==item}}"><view>{{showPy}}</view></view>
</view>
</view>
</view>
</view>
wxss
page {
height: 100%;
}
.show{
position: absolute;
background-color: #5C5B5A;
position: fixed;
width: 100%;
height: 100%;
top: 0;
opacity: 0.7;
}
.container {
/* padding-top: 100rpx; */
box-sizing: border-box;
height: 100%;
}
.search-bar {
font-size: 26rpx;
color: #999999;
background-color: #EFEFEF;
display: flex;
border-radius: 45rpx;
width: 90%;
margin: 20rpx auto 0 auto;
padding: 15rpx 20rpx;
align-items: center;
}
.search-img{
width: 28rpx;
height: 28rpx;
margin: 5rpx 10rpx;
}
.search-bar .clear {
position: absolute;
right: 30rpx;
bottom: 25rpx;
z-index: 2;
height: 50rpx;
width: 50rpx;
opacity: 0.35;
}
.search-bar .split {
padding: 0 30rpx;
}
.search-bar .picker-opts {
box-sizing: border-box;
white-space: nowrap;
float: left;
height: 100rpx;
line-height: 100rpx;
}
.search-bar input {
width: 90%;
}
.search-bar .placeholder {
color: #999999;
}
.list-detail{
z-index: 1000;
position: relative;
}
.list-detail, .list-city {
width: 100%;
height: 100%;
overflow-y: auto;
background: #fff;
}
.list-detail {
border-bottom: 1rpx solid #eee;
padding: 20rpx 20rp 0 0;
font-size: 24rpx;
margin-right: 50rpx;
}
.item-nav {
border-bottom: 1rpx solid #eee;
padding: 20rpx 15rpx;
font-size: 24rpx;
}
.list-detail .title, .history .title {
color: #000;
line-height: 45rpx;
}
.list-detail .address, .history .address {
font-size: 28rpx;
color: #aaa;
white-space: normal;
}
/* 城市列表 */
.list-city {
position: relative;
}
.city-item{
padding-bottom:30rpx
}
.py {
box-sizing: border-box;
font-size: 26rpx;
color: #aaa;
padding: 10rpx 25rpx;
}
.fullname {
box-sizing: border-box;
font-size: 26rpx;
color: #555;
padding: 20rpx;
}
.top-now{
border: 1rpx solid #ECECEC;
display: inline-block;
border-radius: 40rpx;
padding: 16rpx 30rpx;
font-size: 25rpx;
color: #333333;
}
.now-img{
width: 20rpx;
height: 24rpx;
margin-right: 6rpx;
}
.region{
border-bottom: 1rpx solid #eee;
}
.city-py {
position: fixed;
top: 29%;
right: 10rpx;
/* margin-top: -360rpx; */
}
.city-py-item {
font-size: 22rpx;
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
color: #333;
margin-top: 2rpx;
font-weight: normal;
}
.act-city-py {
font-size: 22rpx;
color: #fff!important;
border-radius: 36rpx;
background-color: #FF8700;
}
.showPy {
position: absolute;
/* top: 0; */
color: #fff;
right: 0;
z-index: 3;
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
margin-right: 80rpx;
margin-top: -56rpx;
background-color: #FF8700;
border-radius: 80rpx 80rpx 0;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
.showPy view{
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.hot-city {
border: 1rpx solid #ECECEC;
display: inline-block;
border-radius: 40rpx;
padding: 16rpx 0;
width: 150rpx;
font-size: 25rpx;
color: #333333;
}
.hot-item{
padding: 40rpx 50rpx 20rpx 20rpx;
display: grid;
grid-template-columns: 22% 22% 22% 22%;
text-align: center;
grid-gap: 36rpx 20rpx;
}
.hot-down{
/* display: inline-block; */
float: right;
margin-right: 45rpx;
}
.hot-down image{
width: 20rpx;
height: 10rpx;
}
js
data: {
city: '',
_py: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"], //"hot",
searchList: [],//搜索列表
hidden: true,
showPy: '',
showPy_height: '0',
cityList: {
"A": [
{
city_code: "340800",
city_name: "安慶",
first_letter: "A",
province: "安徽省",
}, {
city_code: "340800",
city_name: "安慶",
first_letter: "A",
province: "安徽省",
}, {
city_code: "340800",
city_name: "安慶",
first_letter: "A",
province: "安徽省",
}, {
city_code: "340800",
city_name: "安慶",
first_letter: "A",
province: "安徽省",
}, {
city_code: "340800",
city_name: "安慶",
first_letter: "A",
province: "安徽省",
}, {
city_code: "340800",
city_name: "安慶",
first_letter: "A",
province: "安徽省",
}, {
city_code: "340800",
city_name: "安慶",
first_letter: "A",
province: "安徽省",
}],
"B": [
{
city_code: "340800",
city_name: "北京",
first_letter: "B",
province: "北京",
}, {
city_code: "340800",
city_name: "北京",
first_letter: "B",
province: "北京",
}, {
city_code: "340800",
city_name: "北京",
first_letter: "B",
province: "北京",
}, {
city_code: "340800",
city_name: "北京",
first_letter: "B",
province: "北京",
}, {
city_code: "340800",
city_name: "北京",
first_letter: "B",
province: "北京",
}, {
city_code: "340800",
city_name: "北京",
first_letter: "B",
province: "北京",
}, {
city_code: "340800",
city_name: "北京",
first_letter: "B",
province: "北京",
}]
}//懶得寫了嗡官，反正按照此數(shù)據(jù)格式就可以
},
//獲取文字信息
getPy: function (e) {
this.setData({
hidden: false,
showPy: e.target.id,
})
},
setPy: function (e) {
// console.log(e)
this.setData({
// hidden: true,
scrollTopId: this.data.showPy
})
},
//滑動(dòng)選擇城市
tMove: function (e) {
console.log(e)
const that = this
let sum = that.data.windowHeight * 0.29
let _py = that.data._py
let count = 0
var query = wx.createSelectorQuery()
query.select('.city-py').boundingClientRect((res) => {
// console.log(res.height/26)
count = res.height / 22
let temp = Math.ceil((e.touches[0].pageY - sum) / count)
console.log(temp)
console.log(_py[temp - 1])
that.setData({
showPy_height: sum + Math.ceil((e.touches[0].pageY - sum) / count) * 32,
showPy: _py[temp - 1]
})
}).exec()
},
//觸發(fā)全部開始選擇
tStart: function () {
this.setData({
hidden: false
})
},
//觸發(fā)結(jié)束選擇
tEnd: function () {
this.setData({
hidden: true,
scrollTopId: this.data.showPy
})
},
image.png
