城市选择（小程序 - 热门城市 - wepy）
作者：互联网
项目中采用的小程序框架 wepy 来搭建小程序项目
1、搭建城市选择的dom结构
1.1 dom结构
<view class="container ">
<view class="selectCityBox">
<view class="selectCityTop">
<view class="leftSearch">
<view class="centerInp">
<input type="search" placeholder="输入城市名进行搜索" value="{{ searchCity }}" bindinput="inputEdit" />
<view class="searchIcon" @tap.stop="searchCityKeyFn()"></view>
</view>
</view>
<view class="rightBtn" @tap.stop="searchCityKeyFn()">搜索</view>
</view>
<view class="searchLetter touchClass" wx:if="{{ searchCity==''}}">
<view wx:for="{{searchLetter}}" style="color:#333333;font-size:20rpx;" wx:key="index" data-letter="{{item}}" catchtouchend="clickLetter" >{{item}}</view>
</view>
<block wx:if="{{ searchCity==''&&isShowLetter }}">
<view class="showSlectedLetter"> {{showLetter}} </view>
</block>
<scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll"
scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}" wx:if="{{ searchCity==''}}">
<view class="hotcity-common thisCity">当前选择城市</view>
<view class="thisCityName">{{city}}</view>
<view>
<text class="hotcity hotcity-common">热门城市</text>
<view class="weui-grids">
<block wx:for-items="{{hotcityList}}" wx:key="{{index}}" >
<view class="weui-grid" data-city="{{item}}" bindtap="bindCity" >
<view class="weui-grid__label">{{item}}</view>
</view>
</block>
</view>
</view>
<view class="selection" wx:for="{{cityList}}" wx:key="{{item.name}}">
<view class="item_letter" id="{{item.name}}">{{item.name}}</view>
<view class="item_city" wx:for="{{item.list}}" wx:for-item="ct" wx:key="index" data-city="{{ct}}" bindtap="bindCity"> {{ct}} </view>
</view>
</scroll-view>
<view class="selectCityContent searchList" wx:if="{{ searchCity!=''}}">
<scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll"
scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">
<repeat for="{{ searchCityList }}" key="index" index="index" item="item" @tap.stop="clickSelectCity({{ item }})">
<view class="searchCity" data-city="{{item}}" @tap.stop="bindCity">{{ item }}</view>
</repeat>
</scroll-view>
</view>
</view>
</view>
图片代码详解
1.2 样式处理
@import './common/comm.less'; // 公共基础样式处理
.selectCityBox{
width:100%;
overflow: hidden;
position: relative;
background: #fff;
padding-top:90rpx;
.searchLetter {
position: fixed;
top:90rpx;
right: 0;
width: 50rpx;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
color: #666;
z-index: 1;
.thishotText {
color: #2ab4ff;
font-size: 20rpx;
margin: 0 !important;
}
view {
margin-top: 20rpx;
}
}
.searchLetter.touchClass {
background-color: #fff;
color: #fff;
padding-top: 40rpx;
}
.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: -100rpx;
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
font-size: 52rpx;
z-index: 1;
}
.selectCityTop{
width:100%;
height:100rpx;
background: #fff;
position: absolute;
top:0;
left:0;
padding:20rpx;
display: flex;
justify-content: flex-start;
.leftSearch{
flex: 1;
margin-right: 10rpx;
background: #f8f8f8;
border-radius: 10rpx;
display: flex;
justify-content: flex-start;
padding:0;
font-size:30rpx;
line-height: 26rpx;
.centerInp{
flex: 1;
padding-left: 70rpx;
position: relative;
input{
display: inline-block;
width:100%;
height:100%;
line-height: 36rpx;
background: transparent;
}
.searchIcon{
position: absolute;
left:16rpx;
top:50%;
transform: translateY(-50%);
width:40rpx;
height:40rpx;
background: url('http://p.kepule.net/staticPic2/icon_search_default@2x.png') no-repeat;
background-size: cover;
}
}
}
.rightBtn{
width:65px;
height:30px;
background:rgba(255,0,0,1);
border-radius: 5px;
line-height: 32px;
text-align: center;
font-size:15px;
color:#fff;
}
}
.hotcity-common {
font-size: 30rpx;
color: #333333;
padding: 0 0 0 30rpx;
font-weight: 600;
}
.thisCity {
padding-top: 30rpx;
}
.thisCityName {
display: inline-block;
border: 1rpx solid #FF0000;
border-radius: 8rpx;
padding: 10rpx 0;
font-size: 24rpx;
color: #FF0000;
text-align: center;
min-width: 149.5rpx;
margin: 20rpx 0 20rpx 30rpx;
background: #FFF2F2;
}
.selection {
display: flex;
width: 100%;
flex-direction: column;
margin-top: 10rpx;
.item_letter {
display: flex;
height: 40rpx;
padding-left: 34rpx;
align-items: center;
font-size: 30rpx;
color: #333;
font-weight: 600;
}
.item_city {
display: flex;
background-color: #fff;
height: 100rpx;
padding-left: 34rpx;
align-items: center;
border-bottom: 1rpx solid #ededed;
font-size: 24rpx;
color: #333333;
}
}
.weui-grid {
position: relative;
float: left;
padding: 10rpx 0;
width: 149.5rpx;
box-sizing: border-box;
border: 1rpx solid #ececec;
border-radius: 8rpx;
margin: 10rpx 12rpx;
}
.weui-grid__label {
display: block;
text-align: center;
color: #333;
font-size: 24rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.weui-grid.slectCity {
color: #FF0000;
border: 1rpx solid #FF0000;
background: #FFF2F2;
.weui-grid__label{
color: #FF0000;
}
}
.selectCityContent{
height:100%;
overflow: hidden;
background: #fff;
padding:0;
text-align: left;
.searchCity{
height:90rpx;
line-height: 90rpx;
text-align: left;
border-bottom: 2rpx solid #f8f8f8;
font-size:30rpx;
color:#333333;
padding:0 20rpx;
}
}
}
2、js部分，dom中的数据以及功能处理
<script>
import wepy from 'wepy'
import Api from '../../utils/api.js' //接口Api
import Utils from '../../utils/utils.js' //公共方法
export default class SelectCity extends wepy.page {
config = {
navigationBarTitleText: '选择城市',
usingComponents: {}
}
components = { }
data = {
searchCity:'', //搜索的城市名
searchLetter: [], //索引字段
showLetter: "", //选择的索引字段
winHeight: 0, //屏幕高度
cityList: [], //城市列表
isShowLetter: false, //是否显示索引
scrollTop: 0, //置顶高度
scrollTopId: '', //置顶id
city: "上海市", //当前城市
hotcityList: [], //热门城市
searchCityList:[], //关键字搜索城市的列表
addressStr:'', //选择的城市名
}
computed = {}
methods = {
//选择右侧索引
clickLetter(e) {
let showLetter = e.currentTarget.dataset.letter,that = this;
this.showLetter = showLetter
this.isShowLetter = true
this.scrollTopId = showLetter
this.$apply();
setTimeout(function () {
that.isShowLetter = false
that.$apply();
}, 1000)
},
//选择城市
bindCity(e) {
this.addressStr = e.currentTarget.dataset.city
this.$apply();
let url = Utils.getNCurrentPages(2);
url.setData({
address: this.addressStr
}),
wepy.navigateBack();
},
//关键字搜索城市
searchCityKeyFn(){
let params = {}
params.keywords = this.searchCity
if( this.searchCity.trim() == '' ){
Utils.wxShowToast('城市名不能为空！')
return;
}
Api.searchKeyCity(params).then( res => {
if( res.code == 200 ){
this.searchCityList = res.data.list
this.$apply();
}else{
Utils.wxShowToast(res.message)
}
})
},
//地址双向绑定
inputEdit(e){
let value = e.detail.value
let key = e.currentTarget.id
this.searchCity = value
this.$apply();
},
}
events = {}
onl oad(options) {
let self = this
self.getHotCity();
var sysInfo = wepy.getSystemInfoSync();
var winHeight = sysInfo.windowHeight;
var itemH = winHeight / self.searchLetter.length;
var tempObj = [];
for (var i = 0; i < self.searchLetter.length; i++) {
var temp = {};
temp.name = self.searchLetter[i];
temp.tHeight = i * itemH;
temp.bHeight = (i + 1) * itemH;
tempObj.push(temp)
}
self.winHeight = winHeight
self.itemH = itemH
self.$apply();
}
onShow() {}
//获取热门城市
getHotCity(){
Api.searchCity().then( res => {
if( res.code == 200 ){
this.searchLetter = res.data.initials
this.hotcityList = res.data.hot_city
this.cityList = res.data.detail_list
this.$apply();
}
})
}
}
</script>
3、效果展示
标签：flex,font,color,城市,wepy,热门,padding,background,height 来源： https://blog.csdn.net/weixin_43861543/article/details/100608674