<view class="search-box">
<input placeholder="中文/拼音/首字母" class='search-input' bindinput='bindSarchInput' placeholder-class='search-input-placeholder' />
</view>
<view class='a-z'>
<view wx:for="{{cityAZ}}" wx:key="unique">
<view data-id='{{item.cityName}}' bindtap='bindAZ'>{{item.cityName}}</view>
</view>
</view>
<view class='city-item-content'>
<view wx:for="{{cityResults}}" wx:key="unique">
<view wx:if="{{item.cityPinYin.length > 1}}" class='city-item' data-cityname='{{item.cityName}}' bindtap='citySelected'>{{item.cityName}}</view>
<view wx:else class='city-item-A-Z' data-cityname='{{item.cityName}}'>{{item.cityName}}</view>
<!-- <view data-cityname='{{item.cityName}}' bindtap='citySelected' >{{item.cityName}}</view> -->
</view>
</view>
.a-z{
width: 35rpx;
position: fixed;
top: 112rpx;
text-align: center;
right: 5rpx;
color: #3399CC;
font-size: 30rpx;
}
.city-item-content {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 110rpx;
background-color: #FFFFFF;
}
.city-item {
background: #fff;
width: 80%;
padding-left: 5%;
margin-left: 5%;
height: 90rpx;
font-size: 45rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #CCCCCC;
}
.city-item-A-Z{
width: 100%;
height: 40rpx;
font-size: 30rpx;
padding-left: 10%;
background-color: #EEEEEE;
border-top: 1rpx solid #CCCCCC;
margin-top: -1rpx;
}
.search-box {
top: 0;
position: fixed;
width: 100%;
background: #eee;
height: 110rpx;
font-size: 30rpx;
border-bottom:1rpx solid #DDDDDD;
}
.search-input {
height: 70rpx;
line-height: 60rpx;
width: 80%;
margin-left: 7.5%;
border-radius: 20rpx;
background: #fff;
margin-top: 20rpx;
padding-left: 5%;
}
.search-input-placeholder {
text-align: center;
}
const app = getApp()
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
cityType: options.cityType
})
if (this.data.cityResults == null) {
this.setData({
cityResults: this.data.citys
})
}
},
bindAZ: function (e) {
var currentCityName = e.currentTarget.dataset.id
var that = this;
//放入A-Z的scrollTop参数
if (that.data.scrollAZ == null) {
wx.createSelectorQuery().selectAll('.city-item-A-Z').fields({
dataset: true,
size: true,
rect: true
}, function (res) {
res.forEach(function (re) {
if (currentCityName == re.dataset.cityname) {
wx.pageScrollTo({
scrollTop: re.top + that.data.scrollNow - 55.5,
duration: 0
})
}
})
}).exec();
} else {
this.data.scrollAZ.forEach(function (re) {
if (currentCityName == re.dataset.cityname) {
wx.pageScrollTo({
scrollTop: re.top + that.data.scrollNow - 55.5,
duration: 0
})
}
})
}
},
onPageScroll: function (e) { // 获取滚动条当前位置
this.setData({
scrollNow: e.scrollTop
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
citySelected: function (e) {
var cityNameTemp = e.currentTarget.dataset.cityname
if (this.data.cityType == 'begin') {
app.globalData.trainBeginCity = cityNameTemp
}
if (this.data.cityType == "end") {
app.globalData.trainEndCity = cityNameTemp
}
wx.navigateBack()
},
bindSarchInput: function (e) {
wx.pageScrollTo({
scrollTop: 0,
duration: 0
})
var inputVal = e.detail.value;
var cityResultsTemp = new Array()
var citys = this.data.citys;
if (inputVal == null || inputVal.trim() == '') {
this.setData({
cityResults: citys
})
return;
}
for (var i = 0; i < citys.length; i++) {
if (citys[i].cityName.indexOf(inputVal) == 0 || citys[i].cityPY.indexOf(inputVal.toLowerCase()) == 0 || citys[i].cityPinYin.indexOf(inputVal.toLowerCase()) == 0) {
//去除热门城市
if (citys[i].cityPY.indexOf("#") != -1) {
continue;
}
var ifHas = false;
for (var j = 0; j < cityResultsTemp.length; j++) {
if (cityResultsTemp[j] == citys[i]) {
ifHas = true;
break;
}
}
if (!ifHas) {
cityResultsTemp.push(citys[i]);
}
}
}
this.setData({
cityResults: cityResultsTemp
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
setTimeout(function () {
wx.stopPullDownRefresh();
}, 1000)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}, /**
* 页面的初始数据
*/
data: {
scrollAZ: null,
scrollNow: 0,
cityType: 'begin',
cityResults: null,
cityAZ: [{ cityName: '热门' }, { cityName: 'A' }, { cityName: 'B' },],
citys: [{ cityName: '热门', cityPinYin: '', cityPY: '' }, { cityName: '上海', cityPinYin: '##', cityPY: '##' }, { cityName: '北京', cityPinYin: '##', cityPY: '##' }, { cityName: '广州', cityPinYin: '##', cityPY: '##' }, { cityName: '深圳', cityPinYin: '##', cityPY: '##' }, { cityName: '遵义', cityPinYin: 'zunyi', cityPY: 'zy' }]
}
})