最初にJSファイルをプロジェクトに配置します
链接: https://pan.baidu.com/s/1C52pcxriEFbK2p1p7aCG2g 提取码: kb9a
次のコードを入れてください
<scroll-view scroll-y="true" style="height: {
{
winHeight}}px;" scroll-into-view="{
{scrollTopId}}" class="city_list">
<view class='top_module' id="top">
<view class='top-inner-box'>
<view class='hot-city-title'>国内热门城市</view>
<view class='list-one-line'>
<view class='one-box' wx:for="{
{hotCitys}}" data-index="{
{index}}" class="{
{((index+1)%3) !=0 ?'one-box':'one-box-last'}}" data-city="{
{item.cityName}}" catchtap='bindCity'>{
{item.cityName}}</view>
</view>
</view>
</view>
<block wx:for="{
{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{
{idx}}">
<text id="{
{idx}}" class="list_tit">{
{idx}}</text>
<block wx:for="{
{cityName}}">
<view class="list_con" data-city="{
{item.name}}" bindtap="bindCity">{
{item.name}}</view>
</block>
</block>
</scroll-view>
<!--城市选择列表-->
<!-- bindtouchstart="chStart" bindtouchend="chEnd" -->
<view class="scroll_list" style="background: rgba(0,0,0,{
{
trans}});" >
<view class="right-title" id="top" bindtap="huiTop">历史</view>
<view class="right-title" id="top" bindtap="huiTop">热门</view>
<block wx:for="{
{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{
{idx}}">
<view id="{
{idx}}" class="scroll_list_chi" style="line-height:{
{
lineHeight}}px ; height:{
{
lineHeight}}px ;font-size:24rpx;" bindtouchstart="getWords" bindtouchend="setWords">{
{idx}}</view>
</block>
</view>
<!--选择显示-->
<view hidden="{
{hidden}}" class="showwords">
{
{showwords}}
</view>
/*城市列表*/
.city_list {
position: relative;
}
/*城市选择头部*/
.list_tit {
display: block;
line-height: 40px;
height: 40px;
padding-left: 15px;
font-size: 16ppx;
background: #f5f5f5;
color: #666;
}
.list_item {
height: 40px;
/*border-top: 1px #f5f5f5 solid ;*/
line-height: 40px;
font-size: 16px;
padding-left: 15px;
}
.list_item::before {
content: " ";
height: 1px;
border-top: 1px #f5f5f5 solid;
position: absolute;
width: 100%;
}
.list_item::before:nth-child(1) {
border: none;
}
/*城市选择 右边*/
.scroll_list {
background: rgba(0, 0, 0, 0);
position: absolute;
width: 46rpx;
top: 100rpx;
right: 10px;
}
.scroll_list_chi {
text-align: center;
font-size: 22rpx;
color: rgb(99, 99, 99)
}
.right-title {
font-size: 24rpx;
width: 80rpx;
}
/*显示框*/
.showwords {
width: 80px;
height: 80px;
background: rgba(0, 0, 0, .3);
border-radius: 50%;
line-height: 80px;
text-align: center;
font-size: 10vw;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.list_con {
padding: 20rpx;
box-sizing: border-box;
}
.top_modulee>view {
font-size: 28rpx;
}
.top-module {
width: 100vw;
height: auto;
}
.top-inner-box {
width: 96vw;
height: auto;
padding-left: 2vw;
padding-right: 2vw;
background: white;
}
.hot-city-title {
height: 8vh;
line-height: 8vh;
}
.list-one-line {
height: auto;
width: 84vw;
margin-left: 2vw;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.one-box {
height: 5vh;
width: 25vw;
margin-right: 2.5vw;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid rgb(233, 232, 232);
margin-bottom: 1.4vh;
}
.one-box-last {
height: 5vh;
width: 25vw;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid rgb(233, 232, 232);
margin-bottom: 1.4vh;
}
//先引用城市数据文件
var city = require('../../utils/address.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
data: {
hidden: true,
hotCitys: [{
"cityCode": "130600",
"cityName": "保定市"
},
{
"cityCode": "140100",
"cityName": "太原市"
},
{
"cityCode": "150300",
"cityName": "乌海市"
},
{
"cityCode": "140400",
"cityName": "长治市"
},
{
"cityCode": "320100",
"cityName": "南京市"
},
{
"cityCode": "310000",
"cityName": "上海市"
}
],
cityName: "", //获取选中的城市名
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
//初始化封装的城市数据
var cityChild = city.City[0];
console.log(cityChild)
var that = this;
wx.getSystemInfo({
success: function(res) {
//lineHeight是右侧A B C D的行高，这个可以根据需要自行设置，我在第二个demo中重新设置
lineHeight = (res.windowHeight - 100) / 22;
console.log(res.windowHeight - 100)
that.setData({
city: cityChild,
winHeight: res.windowHeight-2,
lineHeight: lineHeight
})
}
})
},
huiTop(e){
console.log(e)
var id = e.target.id;
this.setData({
scrollTopId: id
})
},
//获取文字信息
getWords: function(e) {
console.log('获取文字信息')
console.log(e)
var id = e.target.id;
this.endWords = id;
isNum = id;
this.setData({
showwords: this.endWords
})
},
//设置文字信息
setWords: function(e) {
console.log('设置文字信息')
var id = e.target.id;
this.setData({
scrollTopId: id
})
},
//选择城市，并让选中的值显示在文本框里
bindCity: function(e) {
console.log(e.currentTarget.dataset.city);
var cityName = e.currentTarget.dataset.city;
wx.showToast({
title: '您选择了' + cityName,
})
}
})