微信小程序实用组件：城市切换
js:
var city = require('../../utils/city.js');
Page({
data: {
searchLetter: [],
showLetter: "",
winHeight: 0,
tHeight:0,
bHeight:0,
startPageY:0,
cityList:[],
isShowLetter:false,
scrollTop:0,
city:""
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
var searchLetter = city.searchLetter;
var cityList=city.cityList();
// console.log(cityInfo);
var sysInfo = wx.getSystemInfoSync();
console.log(sysInfo);
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;
temp.tHeight = i * itemH;
temp.bHeight = (i + 1) * itemH;
tempObj.push(temp)
}
this.setData({
winHeight: winHeight,
itemH: itemH,
searchLetter: tempObj,
cityList:cityList
})
console.log(this.data.cityInfo);
},
onReady: function () {
// 生命周期函数--监听页面初次渲染完成
},
onShow: function () {
// 生命周期函数--监听页面显示
},
onHide: function () {
// 生命周期函数--监听页面隐藏
},
onUnload: function () {
// 生命周期函数--监听页面卸载
},
onPullDownRefresh: function () {
// 页面相关事件处理函数--监听用户下拉动作
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角分享
return {
title: 'title', // 分享标题
desc: 'desc', // 分享描述
path: 'path' // 分享路径
}
},
searchStart: function (e) {
var showLetter = e.currentTarget.dataset.letter;
var pageY = e.touches.pageY;
this.setScrollTop(this,showLetter);
this.nowLetter(pageY,this);
this.setData({
showLetter: showLetter,
startPageY: pageY,
isShowLetter:true,
})
},
searchMove: function (e) {
var pageY = e.touches.pageY;
var startPageY=this.data.startPageY;
var tHeight=this.data.tHeight;
var bHeight=this.data.bHeight;
var showLetter = 0;
console.log(pageY);
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) {
// console.log(e);
// var showLetter=e.currentTarget.dataset.letter;
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.tHeight <= pageY && pageY<= letterData.bHeight) {
bHeight = letterData.bHeight;
tHeight = letterData.tHeight;
showLetter = letterData.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.initial){
scrollTop=initialCount*30+cityCount*41;
break;
}else{
initialCount++;
cityCount+=cityList.cityInfo.length;
}
}
that.setData({
scrollTop:scrollTop
})
},
bindCity:function(e){
var city=e.currentTarget.dataset.city;
this.setData({city:city})
}
})
WXML:
<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>
<block wx:if="{{isShowLetter}}">
<view class="showSlectedLetter">
{{showLetter}}
</view>
</block>
<view>当前选择城市：{{city}}</view>
<scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-top="{{scrollTop}}">
<view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">
<view class="item_letter">{{item.initial}}</view>
<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>
CSS:
.searchLetter{
position: fixed;
right: 0;
width: 40px;
height: 100%;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
color: #666;
z-index: 1
}
.searchLetter view{
height: 70rpx;
}
.touchClass{
background-color: rgba(0, 0, 0,0.5);
color: #fff;
}
.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: -50px;
width: 100px;
height: 100px;
border-radius:10px;
font-size: 26px;
z-index: 1
}
.selection{
display: flex;
width: 100%;
flex-direction: column;
}
.item_letter{
display: flex;
background-color: #f8f8f8;
height: 30px;
padding-left: 10px;
align-items: center;
}
.item_city{
display: flex;
background-color: #fff;
height: 40px;
padding-left: 10px;
align-items: center;
border-bottom: 1px solid #f8f8f8
}
**** Hidden Message *****
正需要，支持楼主大人了！ 感谢分享 我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊
页:
[1]