欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)按字母排列選擇城市功能

 更新時(shí)間：2019年11月25日 14:33:49   作者：朵拉。  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)按字母排列選擇城市功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

實(shí)現(xiàn)效果預(yù)覽

實(shí)現(xiàn)思想

利用小程序騰訊地圖將所有城市查出來，并將其渲染至頁面（https://lbs.qq.com/qqmap_wx_jssdk/index.html）（其中字母欄也根據(jù)獲取到的數(shù)據(jù)變化）

其中涉及三個(gè)交互（點(diǎn)擊字母時(shí)滾動(dòng)到相應(yīng)位置；滑動(dòng)觸摸字母時(shí)，需滾動(dòng)到相應(yīng)位置，并有當(dāng)前哪個(gè)字母的提示，且有震動(dòng)感；手動(dòng)滑動(dòng)頁面時(shí)，需將當(dāng)前對(duì)應(yīng)的字母選中）

滑動(dòng)觸摸字母時(shí)，首先要得到所有字母所在塊的高度，再平均的獲取到每個(gè)字母的高度。當(dāng)觸摸滾動(dòng)時(shí)，拿到pageY（距離文檔左上角的距離，具體解釋官網(wǎng)有https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#touches）

計(jì)算出所有字母內(nèi)容的高度，并存為一個(gè)數(shù)組

利用pageY計(jì)算出可能到達(dá)的字母位置的下標(biāo)（pageY-字母欄的top值/每個(gè)字母的高度）

將計(jì)算出的下標(biāo)所對(duì)應(yīng)的字母內(nèi)容高度賦值給scroll-top值

手動(dòng)滾動(dòng)列表時(shí)，根據(jù)滾動(dòng)的距離計(jì)算出當(dāng)前滾動(dòng)的下標(biāo)值，將字母數(shù)組的對(duì)應(yīng)的下標(biāo)值做處理

需要注意setData不能頻繁使用，所以在使用的時(shí)候，需要做處理和優(yōu)化

實(shí)現(xiàn)知識(shí)點(diǎn)

字母滾動(dòng)到相應(yīng)位置需使用scroll-view組件中的scroll-into-view 設(shè)置其子元素的id值

滑動(dòng)觸摸字母，需使用小程序事件touchmove事件和touchend事件

手動(dòng)滑動(dòng)頁面時(shí)，需使用scroll-view中的scroll-top屬性設(shè)置豎向滾動(dòng)條位置

代碼

wxml

 <!--pages/findHome/selectCity/index.wxml-->
<view class="selectCity">
 <view class="searchCity">
 <input placeholder="輸入城市名進(jìn)行搜索" 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({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 citys: {},//獲取到的所有城市
 letter: [], //獲取到的所有字母
 searchCity: 0,
 toView: '', //點(diǎn)擊跳轉(zhuǎn)的id
 scrollTop: '',
 citysHeight: [],//所有字母大模塊的top
 azHeight: 0, //每個(gè)字母平均的高度
 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)
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 let query = wx.createSelectorQuery();
 query.select('.searchCity').boundingClientRect(rect => {
 this.setData({
 searchCity: rect.height
 })
 }).exec();
 qqmapsdk.getCityList({
 success: (res) => {//成功后的回調(diào)
 res.result[1].forEach(ele => {
  //如果城市對(duì)象中已經(jīng)存在該字母開頭的
  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: []
 });
 //獲取個(gè)字母大模塊的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'
 });

 }
})

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)按字母排列選擇城市，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論