欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序实现按字母排列选择城市

程序员文章站 2024-03-11 12:03:31
...

小程序实现按字母排列选择城市

实现效果预览

小程序实现按字母排列选择城市

实现思想

  1. 利用小程序腾讯地图将所有城市查出来,并将其渲染至页面(https://lbs.qq.com/qqmap_wx_jssdk/index.html)(其中字母栏也根据获取到的数据变化)
  2. 其中涉及三个交互(点击字母时滚动到相应位置;滑动触摸字母时,需滚动到相应位置,并有当前哪个字母的提示,且有震动感;手动滑动页面时,需将当前对应的字母选中)
  3. 滑动触摸字母时,首先要得到所有字母所在块的高度,再平均的获取到每个字母的高度。当触摸滚动时,拿到pageY(距离文档左上角的距离,具体解释官网有https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#touches)
  4. 计算出所有字母内容的高度,并存为一个数组
  5. 利用pageY计算出可能到达的字母位置的下标(pageY-字母栏的top值/每个字母的高度)
  6. 将计算出的下标所对应的字母内容高度赋值给scroll-top值
  7. 手动滚动列表时,根据滚动的距离计算出当前滚动的下标值,将字母数组的对应的下标值做处理
  8. 需要注意setData不能频繁使用,所以在使用的时候,需要做处理和优化

实现知识点

  1. 字母滚动到相应位置需使用scroll-view组件中的scroll-into-view 设置其子元素的id值
  2. 滑动触摸字母,需使用小程序事件touchmove事件和touchend事件
  3. 手动滑动页面时,需使用scroll-view中的scroll-top属性设置竖向滚动条位置

代码

wxml

      <!--pages/findHome/selectCity/index.wxml-->
<view class="selectCity">
  <view class="searchCity">
    <input placeholder="输入城市名进行搜索" bindinput="getSuggest" bindfocus="inputFocus"></input>
  </view>
  <view class="cityContainer" style="padding-top: {{searchCity}}px">
    <scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" bindscroll="scroll" style="height: 100%" scroll-with-animation="ture">
      <block wx:for="{{citys}}" wx:for-index="key" wx:for-item="value" wx:key="key">
        <view class="cityItem">
          <view class="citytype" id="{{value.id}}">{{key}}</view>
            <block wx:for="{{value.data}}" wx:for-key="i" wx:for-item="ele" wx:key="i">
                <view class="cityDetail" data-name="{{ele.fullname}}" bindtap="confrimCity">{{ele.fullname}}</view>
            </block>
        </view>
      </block>    
    </scroll-view>  
  <view class="cityAZ">
    <block wx:for="{{letter}}" wx:key="{{id}}">
      <view bindtap="letterClick" class="AZ {{!touchFlag && activeAZ == item.id ? 'activeAZ' : ''}}" data-id="{{item.id}}" catchtouchmove="whenTouch" catchtouchend="touchEnd" id="{{item.id}}">{{item.name}}
        <view class="AZInfo" wx:if="{{touchFlag && activeAZ == item.id}}">
          {{item.name}}
          <view class="trigle"></view>
        </view>
      </view>
    </block>
  </view>
  </view>
</view>


wxss

/* pages/findHome/selectCity/index.wxss */
.selectCity {
  width: 100vw;
  height: 100vh;
}
.searchCity {
  height: 70rpx;
  line-height: 70rpx;
  width: 100%;
  padding: 0 24rpx;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 10;
}
.cityContainer {
  height: 100%;
}
.cityItem {
  padding: 0 70rpx 0 24rpx;
}
.citytype {
  height: 70rpx;
  background: #F5F5F5;
  line-height: 70rpx;
  padding: 0 24rpx;

}
.cityDetail {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 24rpx;
  border-top: 1px solid #DCDCDC;
  border-bottom: none;
}
.cityDetail:last-child {
  border-bottom: 1px solid #DCDCDC;
}
.cityAZ {
  position: fixed;
  top: 136rpx;
  right: 0;
  font-size: 28rpx;
  padding: 0 24rpx;
  /* background: #fff; */
  width: 40rpx;
  text-align: center;
}
.AZ {
  position: relative;
  border-radius: 50%;
}
.activeAZ {
  background: orange;
  color: #fff;
}
.AZInfo {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  line-height: 70rpx;
  background: orange;
  position: absolute;
  left: -94rpx;
  top: -14rpx;
}
.trigle {
  width: 0;
  height: 0;
  border: 32rpx solid orange;
  border-right: none;
  border-top-color: transparent;
  border-bottom-color: transparent; 
  position: absolute;
  top: 4rpx;
  right: -9rpx;
}

js

// pages/findHome/selectCity/index.js
let cityDatas = require('../../../utils/cityData.js');
let QQMapWX = require('../../../libs/qqmap-wx-jssdk.js');
let qqmapsdk = new QQMapWX({
  key: '4WKBZ-ADX36-MGNS4-E6TFJ-Q6JJE-YBF2A'
});
Page({

  /**
   * 页面的初始数据
   */
  data: {
    citys: {},//获取到的所有城市
    letter: [], //获取到的所有字母
    searchCity: 0,
    toView: '', //点击跳转的id
    scrollTop: '',
    citysHeight: [],//所有字母大模块的top
    azHeight: 0,   //每个字母平均的高度
    azTop: 0,
    index: '',
    activeAZ: 'A1',
    touchFlag: false
  },
  letterClick: function (e) {
    this.setData({
      touchFlag: false,
      toView: e.currentTarget.dataset.id
      // activeAZ: e.currentTarget.dataset.id,
    })
  },
  confrimCity() {
    wx.switchTab({
      url: '/pages/findHome/index',
    })                
  },
  whenTouch(e) {
    let index = 0;
    if((e.touches[0].pageY -  this.data.azTop) % this.data.azHeight == 0){
      index = (e.touches[0].pageY - this.data.azTop) / this.data.azHeight
    }else {
      index = parseInt((e.touches[0].pageY - this.data.azTop) / this.data.azHeight);
      if(this.data.index !== index && index < this.data.letter.length) {
        this.data.index = index;
        this.setData({
          scrollTop: this.data.citysHeight[index],
          activeAZ: this.data.letter[index].id,
          touchFlag: true
        })
        wx.vibrateShort();
      }
    }
  },
  touchEnd() {
    setTimeout(()=>{
      this.setData({
        touchFlag: false
      })
    },600)
  },
  scroll(e) {
    let scrollHeight = e.detail.scrollTop;
    let index = this.calculateIndex(this.data.citysHeight, scrollHeight);
    if (this.data.index !== index && index < this.data.letter.length) {
      this.setData({
        index: index,
        activeAZ: this.data.letter[index].id,
        touchFlag: false
      })
    }
  },
  calculateIndex(arr, scrollHeight) {
    let index = 0;
    for (let i = 0; i < arr.length; i++) {
      if (scrollHeight >= arr[i - 1] && scrollHeight < arr[i]) {
        index = i - 1;
        break;
      }else if(scrollHeight >= arr[arr.length-1]) {
        index = arr.length - 1;
        break;
      }else if(0 < scrollHeight < arr[0]) {
        index = 0
      }
    }
    return index;
  },
  getSuggest(e) {
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let query = wx.createSelectorQuery();
    query.select('.searchCity').boundingClientRect(rect => {
      this.setData({
        searchCity: rect.height
      })
    }).exec();
    qqmapsdk.getCityList({
      success: (res) => {//成功后的回调
        res.result[1].forEach(ele => {
          //如果城市对象中已经存在该字母开头的
          if (this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()]){
            this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].data.push(ele);
          }else {
            this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()] = {id: '',data: []};
            this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].id = ele.pinyin[0].charAt(0).toUpperCase()+1;
            this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].data.push(ele);
          }
        })
        let newArr = Object.keys(this.data.citys).sort();
        let sortCity = {};
        newArr.forEach(ele => {
          this.data.letter.push({name: ele, id: ele+1})
          sortCity[ele] = this.data.citys[ele]
        })
        this.setData({
          citys: sortCity,
          letter: this.data.letter,
          citysHeight: []
        });
        //获取个字母大模块的top值
        query.selectAll('.cityItem').boundingClientRect((rect) => {
          this.data.citysHeight = [];
          rect.forEach(ele => {
            this.data.citysHeight.push(ele.top - this.data.searchCity)
          })
        }).exec();

        //获取已有字母的高度
        let winH = wx.getSystemInfoSync().windowHeight;  
        query.select('.cityAZ').boundingClientRect((rect) => {
         this.data.azHeight = rect.height / this.data.letter.length;
         this.data.azTop = rect.top;
        }).exec();
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
      
      }
    });
    this.setData({
      toView: 'A1'
    });

  }
})