微信小程-实现城市列表选择
实现效果预览
1、定位当前城市
2、根据首字母定位到响应的区域
3、点击选中区域
目录结构
index.wxml 页面
```<view class="searchLetter touchClass">
<view class="thishotText" bindtap="hotCity">
<view style="margin-top:0;">当前</view>
<view style="margin-top:0;">热门</view>
</view>
<view wx:for="{{searchLetter}}" style="color:#F9C400;font-size:20rpx;" wx:key="index" data-letter="{{item.name}}" catchtouchend="clickLetter" >{{item.name}}</view>
</view>
<block wx:if="{{isShowLetter}}">
<view class="showSlectedLetter">
{{showLetter}}
</view>
</block>
<scroll-view scroll-y="true" style="background-color: #fff;height:{{winHeight}}px" bindscroll="bindScroll"
scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">
<view class="hotcity-common thisCity">当前选择城市</view>
<view class="thisCityName">{{city}}</view>
<view>
<text class="hotcity hotcity-common">热门城市</text>
<view class="weui-grids">
<block wx:for-items="{{hotcityList}}" wx:key='item'>
<view class="weui-grid" data-cityCode="{{item.cityCode}}" data-city="{{item.city}}" bindtap="bindHotCity" >
<view class="weui-grid__label">{{item.city}}</view>
</view>
</block>
</view>
</view>
<view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">
<view class="item_letter" id="{{item.initial}}">
<image src="/images/shopbgimg.png"></image>
<text> {{item.initial}}</text>
</view>
<view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-cityCode="{{ct.code}}" data-city="{{ct.city}}" bindtap="bindCity">
{{ct.city}}
</view>
</view>
</scroll-view>
```
index.js 页面
```var city = require('../../utils/city.js');
var app = getApp()
Page({
data: {
searchLetter: [],
showLetter: "",
winHeight: 0,
// tHeight: 0,
// bHeight: 0,
cityList: [],
isShowLetter: false,
scrollTop: 0,//置顶高度
scrollTopId: '',//置顶id
city: "",
hotcityList: [{ cityCode: 110000, city: '北京市' }, { cityCode: 310000, city: '上海市' }, { cityCode: 440100, city: '广州市' }, { cityCode: 440300, city: '深圳市' }, { cityCode: 330100, city: '杭州市' }, { cityCode: 320100, city: '南京市' }, { cityCode: 420100, city: '武汉市' }, { cityCode: 410100, city: '郑州市' }, { cityCode: 120000, city: '天津市' }, { cityCode: 610100, city: '西安市' }, { cityCode: 510100, city: '成都市' }, { cityCode: 500000, city: '重庆市' }],
latitude: '',
longitude: ''
},
onLoad: function (e) {
// 生命周期函数--监听页面加载
var searchLetter = city.searchLetter;
var cityList = city.cityList();
var sysInfo = wx.getSystemInfoSync();
var winHeight = sysInfo.windowHeight;
var itemH = winHeight / searchLetter.length;
var tempObj = [];
for (var i = 0; i < searchLetter.length; i++) {
var temp = {};
temp.name = searchLetter[i];
temp.tHeight = i * itemH;
temp.bHeight = (i + 1) * itemH;
tempObj.push(temp)
}
this.setData({
winHeight: winHeight,
itemH: itemH,
searchLetter: tempObj,
cityList: cityList,
city: e.city
})
},
onReady: function () {
// 生命周期函数--监听页面初次渲染完成
},
onShow: function () {
// 生命周期函数--监听页面显示
this.getLocation()
},
clickLetter: function (e) {
var showLetter = e.currentTarget.dataset.letter;
this.setData({
showLetter: showLetter,
isShowLetter: true,
scrollTopId: showLetter,
})
var that = this;
setTimeout(function () {
that.setData({
isShowLetter: false
})
}, 1000)
},
// 微信获得经纬度
getLocation: function () {
let vm = this;
var latitude = ''
var longitude = ''
wx.getLocation({
type: 'wgs84',
success: function (res) {
latitude = res.latitude
longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy;
vm.setData({
latitude: res.latitude,
longitude: res.longitude
})
},
fail: function (res) {
}
})
//
},
//选择城市
bindCity: function (e) {
this.setData({
city: e.currentTarget.dataset.city,
})
},
//选择热门城市
bindHotCity: function (e) {
this.setData({
city: e.currentTarget.dataset.city
})
},
//点击热门城市回到顶部
hotCity: function () {
this.setData({
scrollTop: 0,
})
}
})
```
index.wxss 页面
```.searchLetter {
position: fixed;
right: 0;
width: 50rpx;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
color: #666;
z-index: 1;
padding-right: 30rpx;
padding-left: 13rpx;
}
.searchLetter view {
margin-top: 20rpx;
}
.touchClass {
background-color: #fff;
color: #fff;
padding-top: 46rpx;
}
.showSlectedLetter {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
margin: -100rpx;
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
font-size: 52rpx;
z-index: 1;
}
.selection {
display: flex;
width: 100%;
flex-direction: column;
margin-top: 10rpx;
}
.item_letter {
display: flex;
height: 67rpx;
line-height: 67rpx;
padding-left: 69rpx;
align-items: center;
font-size: 20rpx;
color: #333;
position: relative
}
.item_letter image {
height: 67rpx;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.item_letter text{
position: absolute;
top: 0;
left: 69rpx;
}
.item_city {
display: flex;
background-color: #fff;
height: 83rpx;
margin-left: 43rpx;
align-items: center;
border-bottom: 1rpx solid #EDEDED;
font-size: 22rpx;
color: #666;
}
.hotcity-common {
font-size: 20rpx;
color: #666;
padding: 0 0 0 40rpx;
}
.thisCity {
padding-top: 30rpx;
}
.thisCityName {
display: inline-block;
border: 1rpx solid #F9C400;
padding: 10rpx;
font-size: 20rpx;
color: #F9C400;
text-align: center;
min-width: 92rpx;
margin: 28rpx 0 25rpx 49rpx;
border-radius:6rpx;
}
.thishotText {
color: #F9C400;
font-size: 20rpx;
margin: 0 !important;
}
.slectCity {
border-color:#F9C400 !important;
}
.slectCity view {
color: #F9C400 !important;
}
.weui-grids{
margin-left: 49rpx;
overflow: hidden;
padding-bottom: 18rpx;
}
.weui-grid {
position: relative;
float: left;
width: 124rpx;
box-sizing: border-box;
border-radius: 6rpx;
margin: 18rpx 29rpx 26rpx 0;
height: 46rpx;
line-height: 46rpx;
background: #F4F4F4;
font-size: 22rpx;
color: #666
}
.weui-grid__label {
display: block;
text-align: center;
color: #333;
font-size: 24rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
```
city.js文件里面是省市 有需要私信！
