争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

微信小程序完成城市下文的选择

时间:2023/12/24作者:未知来源:争怎路由网人气:

this.data.date.trim() == "") { var day = new Date() day.setTime(day.getTime() + 24 * 60 * 60 * 1000); var year = day.getFullYear(); //年 var month = day.getMonth() + 1; //月 var day = day.getDate(); //日 if (month < 10) { month = "0" + month; } if (day < 10) { day = "0" + day; } this.setData({ date: year + '-' + month + '-' + day }) } }, onPullDownRefresh: function () { wx.stopPullDownRefresh(); }, bindBeginCityView: function () { wx.navigateTo({ url: '../citys/citys?cityType=begin', }) }, bindEndCityView: function () { wx.navigateTo({ url: '../citys/citys?cityType=end', }) }, onShow: function () { this.setData({ begin: app.globalData.trainBeginCity }) this.setData({ end: app.globalData.trainEndCity }) } })

index.wxss

.flex-box {
 display: flex;
 flex-direction: row;
 border-bottom: #CCCCCC solid 1px;
 margin: 28rpx;
 width: 600rpx;
 padding:10rpx;
 height: 70rpx;
}

.btn-area{
 margin: 30rpx;
 width: 600rpx;
}

.flex-box-header{
 width: 25%;
 font-size: 30rpx;
 margin-top: 10rpx;
 color: #999999;

 /* line-height: 60rpx; */
}

.flex-box-content{
 width: 70%;
 margin-top: 0rpx; 
 font-size: 45rpx;
}
.flex-box-content-pricker{
 margin-top: 0rpx; 
 width: 70%;
 font-size: 45rpx;
}

.form-content{
 margin-top:30rpx; 
 display: flex;
 margin-left: 5%;
 width: 90%;
 background-color: #FFFFFF;
 border-radius: 20rpx;
 /* border: 3rpx solid #CCCCCC; */
 height: 530rpx;
}

.bus-view{
 display: flex;
 flex-direction: row;
 width: 700rpx;
 height: 100rpx;
 margin:20rpx;
 font-size: 30rpx;
 border-bottom: 1rpx solid #CCCCCC; 
}

.bus-view-left{
 text-align: center;
 line-height: 100rpx;
 font-size: 30rpx;
 width: 200rpx;
 /* border-right: 1rpx solid #CCCCCC; */
}

.bus-view-right{
 width: 300rpx;
 display: flex;
 flex-direction: column;
 font-size: 28rpx;
 /* border: 1rpx solid #CCCCCC; */
}

.bus-view-right-item{
 text-align: center;
 margin: 5rpx;
}

.btn-query{
 background-color:#3399CC;
 color:#FFFFFF;
}


.input-city{
 /* border: 1rpx solid #CCCCCC; */
}

citys.wxml

<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>

citys.js

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   

关键词:微信小程序完成城市下文的选择




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版