實現(xiàn)效果預(yù)覽
1蓝厌、定位當(dāng)前城市
2驰徊、根據(jù)首字母定位到響應(yīng)的區(qū)域
3睁冬、點擊選中區(qū)域
目錄結(jié)構(gòu)
index.wxml 頁面
```<view class="searchLetter touchClass">
? <view class="thishotText" bindtap="hotCity">
? ? <view style="margin-top:0;">當(dāng)前</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">當(dāng)前選擇城市</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) {
? ? // 生命周期函數(shù)--監(jiān)聽頁面加載
? ? 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 () {
? ? // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? },
? onShow: function () {
? ? // 生命周期函數(shù)--監(jiān)聽頁面顯示
? ? 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)
? },
? // 微信獲得經(jīng)緯度
? 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文件里面是省市? 有需要私信镐确！
