小程序根据节点实现城市选择器

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

 
<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,
    })
  }
})