效果图与文件目录
wxml
<!--pages/citylist/citylist.wxml-->
<view class="city-body">
<!-- 搜索城市 -->
<view class="search-bar">
<view class="search-row">
<view class="input-box">
<icon type="search" size="24" style="height: 55rpx;" color="#000000"></icon>
<input placeholder="请输入城市名称查询" confirm-type="search" bindinput="inputTap" bindconfirm="confirmTap" value="{{keywords}}"></input>
<icon bindtap="delTap" type="cancel" size="24" style="height: 55rpx;" color="#000000"></icon>
</view>
</view>
</view>
<!-- 城市列表 -->
<view class='list-city' wx:if="{{showCity}}">
<scroll-view scroll-y="true" style="height:100%;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
<!-- 全部 -->
<view class='item' wx:for="{{cityData.citylist}}" wx:for-index="idx" wx:for-item="group" wx:key="key">
<view class='py' id="{{group.letter}}">{{group.letter}}</view>
<view class="fullname" wx:for="{{group.data}}" wx:key="key" data-cityname="{{item.cityName}}" data-cityid="{{item.cityId}}" bindtap='selectCity'>{{item.cityName}}</view>
</view>
</scroll-view>
<!-- 首字母 -->
<view class='city-py' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
<view wx:for="{{cityData.letter}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{{item}}">{{item == 'hot' ? "★" : item}}
</view>
</view>
</view>
<!-- 搜索结果 -->
<scroll-view scroll-y="true" style="height:100%;" class="searchRes" wx:else>
<view wx:if="{{cityRes!='' && keywords!=''}}">
<view class="restitle">搜索结果</view>
<view class="fullname" wx:for="{{cityRes}}" wx:key="key" data-cityname="{{item.cityName}}" data-cityid="{{item.cityId}}" bindtap='selectCity'>{{item.cityName}}</view>
</view>
<view class="no-city" wx:if="{{keywords && cityRes==''}}">
<image src="/images/nocity.png"></image>
<text>没有找到相关城市</text>
</view>
<!-- <view >没有找到相关城市</view> -->
</scroll-view>
</view>
<!--选择显示-->
<view hidden="{{hidden}}" class="showPy">{{showPy == 'hot' ? "★" : showPy}}</view>
js
// citylist.js
Page({
/**
* 组件的初始数据
*/
data: {
city_name:"",
hidden: true,
showCity: true,
cityData: {},
},
// 输入事件
inputTap(e) {
let keywords = e.detail.value;
this.setData({
keywords,
showCity: false
})
let cityRes = this.cityRes(keywords)
this.setData({
cityRes,
})
},
// 输入框回车搜索事件
confirmTap(e) {
let keywords = e.detail.value;
this.setData({
keywords,
showCity: false
})
let cityRes = this.cityRes(keywords)
this.setData({
cityRes,
})
},
//选择城市
selectCity: function (e) {
var dataset = e.currentTarget.dataset;
let usualData = this.data.usualData;
wx.showToast({
icon: "none",
title: dataset.cityname,
})
},
touchstart: function (e) {
this.setData({
index: e.currentTarget.dataset.index,
Mstart: e.changedTouches[0].pageX
});
},
touchmove: function (e) {
var history = this.data.historyList;
var move = this.data.Mstart - e.changedTouches[0].pageX;
history[this.data.index].x = move > 0 ? -move : 0;
this.setData({
historyList: history
});
},
touchend: function (e) {
var history = this.data.historyList;
var move = this.data.Mstart - e.changedTouches[0].pageX;
history[this.data.index].x = move > 100 ? -180 : 0;
this.setData({
historyList: history
});
},
//获取文字信息
getPy: function (e) {
this.setData({
hidden: false,
showPy: e.target.id,
})
},
setPy: function (e) {
this.setData({
hidden: true,
scrollTopId: this.data.showPy
})
},
//滑动选择城市
tMove: function (e) {
var y = e.touches[0].clientY,
offsettop = e.currentTarget.offsetTop;
//判断选择区域,只有在选择区才会生效
if (y > offsettop) {
var num = parseInt((y - offsettop) / 12);
this.setData({
showPy: this.data._py[num]
})
};
},
//触发全部开始选择
tStart: function () {
this.setData({
hidden: false
})
},
//触发结束选择
tEnd: function () {
this.setData({
hidden: true,
scrollTopId: this.data.showPy
})
},
// 输入框删除icon事件
delTap() {
this.setData({
keywords: "",
showCity: true,
})
},
// 获取所有城市列表
cityRes(cityName) {
let cityData = this.data.cityData;
let allcity = [];
cityData.citylist.forEach(v => {
v.data.forEach(v1 => {
allcity.push(v1)
})
})
let cityRes = allcity.filter(v => {
if (v.cityName.includes(cityName)) {
return v;
}
});
return cityRes
},
//获取页面数据
getcitylist() {
let citylist = [{
"letter": "A",
"data": [{
"cityId": "v7",
"cityName": "安徽"
}]
}, {
"letter": "B",
"data": [{
"cityId": "v10",
"cityName": "巴中"
}, {
"cityId": "v4",
"cityName": "包头"
}, {
"cityId": "v1",
"cityName": "北京"
}]
}, {
"letter": "C",
"data": [{
"cityId": "v15",
"cityName": "成都"
}]
}, {
"letter": "D",
"data": [{
"cityId": "v21",
"cityName": "稻城"
}]
}, {
"letter": "G",
"data": [{
"cityId": "v17",
"cityName": "广州"
}, {
"cityId": "v29",
"cityName": "桂林"
}]
}, {
"letter": "H",
"data": [{
"cityId": "v9",
"cityName": "海南"
}, {
"cityId": "v3",
"cityName": "呼和浩特"
}]
}, {
"letter": "L",
"data": [{
"cityId": "v24",
"cityName": "洛阳"
}, {
"cityId": "v20",
"cityName": "拉萨"
}, {
"cityId": "v14",
"cityName": "丽江"
}]
}, {
"letter": "M",
"data": [{
"cityId": "v13",
"cityName": "眉山"
}]
}, {
"letter": "N",
"data": [{
"cityId": "v27",
"cityName": "南京"
}]
}, {
"letter": "S",
"data": [{
"cityId": "v18",
"cityName": "三亚"
}, {
"cityId": "v2",
"cityName": "上海"
}]
}, {
"letter": "T",
"data": [{
"cityId": "v5",
"cityName": "天津"
}]
}, {
"letter": "W",
"data": [{
"cityId": "v12",
"cityName": "乌鲁木齐"
}, {
"cityId": "v25",
"cityName": "武汉"
}]
}, {
"letter": "X",
"data": [{
"cityId": "v23",
"cityName": "西安"
}, {
"cityId": "v28",
"cityName": "香港"
}, {
"cityId": "v19",
"cityName": "厦门"
}]
}, {
"letter": "Z",
"data": [{
"cityId": "v8",
"cityName": "张家口"
}]
}]
let hotCity = [{
"cityId": "v1",
"cityName": "北京"
}, {
"cityId": "v2",
"cityName": "上海"
}, {
"cityId": "v27",
"cityName": "南京"
}, {
"cityId": "v15",
"cityName": "成都"
}, {
"cityId": "v17",
"cityName": "广州"
}, {
"cityId": "v25",
"cityName": "武汉"
}, {
"cityId": "v19",
"cityName": "厦门"
}]
let letter = ["hot", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
this.setData({
cityData: {
citylist,
hotCity,
letter,
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
this.getcitylist();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxss
/* pages/citylist/citylist.wxss */
page {
height: 91.5%;
}
.city-body {
/* padding-top: 92rpx; */
box-sizing: border-box;
height: 100%;
}
/* 定位城市 */
.dw-style {
display: flex;
align-items: center;
padding: 25rpx;
}
.dw-style image {
width: 55rpx;
height: 55rpx;
margin-right: 10rpx;
}
.dw-style text {
font-size: 30rpx;
color: #555;
}
/* 搜索城市 */
.search-bar {
width: 100%;
height: 110rpx;
line-height: 100rpx;
top: 0;
box-sizing: border-box;
overflow: hidden;
padding: 20rpx;
position: relative;
}
.search-row {
display: flex;
align-items: center;
}
.search-row text {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 40rpx;
color: rgba(20, 20, 20, 1);
opacity: 1;
margin-left: 30rpx;
}
.input-box {
height: 62rpx;
/* background: #f5f5f5; */
opacity: 1;
border-radius: 32rpx;
padding: 5rpx 10rpx;
display: flex;
align-items: center;
font-size: 28rpx;
flex: 1;
border: 1rpx solid rgb(73, 157, 235);
}
.input-box image {
width: 55rpx;
height: 55rpx;
margin: 0 10rpx;
}
.input-box input {
flex: 1;
height: 62rpx;
}
.list-detail,
.list-city {
width: 100%;
height: 100%;
overflow-y: auto;
background: #fff;
}
.list-detail .item-nav {
border-bottom: 1rpx solid #eee;
}
.list-detail .title,
.history .title {
font-size: 32rpx;
color: #000;
line-height: 45rpx;
}
.list-detail .address,
.history .address {
font-size: 28rpx;
color: #aaa;
white-space: normal;
}
/* 搜索结果 */
.searchRes .restitle {
background: #eee;
font-size: 25rpx;
color: #aaa;
padding: 12rpx 25rpx;
}
.citytext {
box-sizing: border-box;
font-size: 30rpx;
color: #555;
padding: 25rpx;
border-bottom: 1rpx solid #eee;
}
.no-city {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 255rpx;
}
.no-city image {
width: 298rpx;
height: 226rpx;
}
.no-city text {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 40rpx;
color: rgba(167, 166, 166, 1);
opacity: 1;
margin-top: 25rpx;
}
/* 城市列表 */
.list-city {
position: relative;
}
.py {
box-sizing: border-box;
background: #f5f5f5;
font-size: 23rpx;
color: #aaa;
padding: 10rpx 25rpx;
}
.fullname {
box-sizing: border-box;
font-size: 30rpx;
color: #555;
padding: 25rpx;
border-bottom: 1rpx solid #eee;
}
.city-py {
position: fixed;
top: 21%;
right: 0;
/* margin-top: -360rpx; */
}
.city-py view {
font-size: 25rpx;
width: 60rpx;
height: 37rpx;
line-height: 37rpx;
text-align: center;
/* color: #555; */
color: rgb(73, 157, 235);
}
.showPy {
width: 150rpx;
height: 150rpx;
background: #fff;
border-radius: 15rpx;
line-height: 150rpx;
text-align: center;
font-size: 80rpx;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 3;
/* color: #333; */
color: rgb(73, 157, 235);
box-shadow: 0 0 150rpx rgba(0, 0, 0, 0.35);
}
.hot-city {
border: 1rpx solid #eee;
display: inline-block;
margin: 25rpx 0 0 22rpx;
padding: 10rpx 0rpx;
font-size: 25rpx;
border-radius: 6rpx;
width: 118rpx;
text-align: center;
}
json
{
"navigationBarBackgroundColor":"#82b8db",
"navigationBarTextStyle":"white",
"navigationBarTitleText":"城市列表"
}
原文链接https://blog.csdn.net/qq_40679724/article/details/119387743
标签：function,height,程序实现,微信,cityName,列表,cityId,font,data From： https://www.cnblogs.com/qqxx/p/16620829.html