--效果如图
//WXMLview!-- 首字母检索 -- view class="searchLetter touchClass" !-- 右边字母数据数据 触摸事件-- view wx:for="{{searchLetter}}" style="height:{{itemH}}px" wx:key="index" data-letter="{{item.name}}" catchtouchstart="searchStart" catchtouchmove="searchMove" catchtouchend="searchEnd"{{item.name}}/view /view !-- 左边字母跟右边字母true时 屏幕中心显示选中的首字母-- block wx:if="{{isShowLetter}}" !-- 居中首字母样式 -- view class="cont_Letter" {{showLetter}} /view /block !-- 城市数据信息 -- scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-top="{{scrollTop}}" !-- 循环城市数据 -- view wx:for="{{cityList}}" wx:key="{{item.initial}}" !-- 循环首字母检索信息 -- view class="list_letter"{{item.initial}}/view !-- 城市ID城市名称 -- view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-city="{{ct.city}}" bindtap="bindCity" {{ct.city}} /view /view /scroll-view/view//WXSS/* 首字母样式 */.searchLetter{ position: fixed; right: 0; width: 40px; height: 100%; text-align: center; justify-content: center; display: flex; flex-direction: column; color: #666; background-color: #ccc; z-index: 1}/* 首字母高度 */.searchLetter view{ height: 70rpx;}/* 右边首字母样式 */.touchClass{ color: #A56E0A; font-size: 28rpx;}/* 居中显示的选中首字母 */.cont_Letter{ background-color:#666; color: #fff; display: flex; justify-content: center; align-items: center; position: fixed; top:50%; left: 50%; margin: -50px; width: 100px; height: 100px; border-radius:10px; font-size: 26px; z-index: 1}/* 循环数据首字母检索 */.list_letter{ display: flex; background-color: #f8f8f8; height: 30px; color: #2a2a2a; font-size: 26rpx; padding-left: 10px; align-items: center;}/* 城市样式 */.item_city{ display: flex; background-color: #fff; height: 40px; padding-left: 10px; color: #2a2a2a; font-size: 30rpx; align-items: center; border-bottom: 1px solid #f8f8f8}//JS// 引入city.jsvar city = require('../../utils/city.js');Page({ data: { // 首字母索引数组 searchLetter: [], // 选中字母 showLetter: "", winHeight: 0, tHeight: 0, bHeight: 0, startPageY: 0, // city数据 cityList: [], isShowLetter: false, scrollTop: 0, }, // 初始化加载 onLoad: function (options) { // 生命周期函数--监听页面加载 var searchLetter = city.searchLetter; var cityList = city.cityList(); var sysInfo = wx.getSystemInfoSync(); var winHeight = sysInfo.windowHeight; //添加要匹配的字母范围值 //1、更加屏幕高度设置子元素的高度 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 }) }, // 触摸滑动开始 searchStart: function (e) { var showLetter = e.currentTarget.dataset.letter; var pageY = e.touches[0].pageY; console.log("111"); wx.vibrateShort({ }); this.setScrollTop(this, showLetter); this.nowLetter(pageY, this); this.setData({ showLetter: showLetter, startPageY: pageY, isShowLetter: true, }) }, // 移动 searchMove: function (e) { var pageY = e.touches[0].pageY; var startPageY = this.data.startPageY; var tHeight = this.data.tHeight; var bHeight = this.data.bHeight; var showLetter = 0; wx.vibrateShort({ }); if (startPageY - pageY 0) { //向上移动 if (pageY tHeight) { // showLetter=this.mateLetter(pageY,this); this.nowLetter(pageY, this); } } else {//向下移动 if (pageY bHeight) { // showLetter=this.mateLetter(pageY,this); this.nowLetter(pageY, this); } } }, // 滑动结束 searchEnd: function (e) { // var showLetter=e.currentTarget.dataset.letter; wx.vibrateShort({ }); var that = this; setTimeout(function () { that.setData({ isShowLetter: false }) }, 1000) }, //当前选中的信息 nowLetter: function (pageY, that) { var letterData = this.data.searchLetter; var bHeight = 0; var tHeight = 0; var showLetter = ""; for (var i = 0; i letterData.length; i++) { if (letterData[i].tHeight = pageY && pageY = letterData[i].bHeight) { bHeight = letterData[i].bHeight; tHeight = letterData[i].tHeight; showLetter = letterData[i].name; break; } } this.setScrollTop(that, showLetter); that.setData({ bHeight: bHeight, tHeight: tHeight, showLetter: showLetter, startPageY: pageY }) }, // 滚动事件 bindScroll: function (e) { // console.log(e.detail) }, setScrollTop: function (that, showLetter) { var scrollTop = 0; var cityList = that.data.cityList; var cityCount = 0; var initialCount = 0; for (var i = 0; i cityList.length; i++) { if (showLetter == cityList[i].initial) { scrollTop = initialCount * 30 + cityCount * 41; break; } else { initialCount++; cityCount += cityList[i].cityInfo.length; } } that.setData({ scrollTop: scrollTop }) },// 当前选中城市 bindCity: function (e) { var city = e.currentTarget.dataset.city; console.log(city); }})
