mini-shop/pages/city/city.js

// pages/city/city.js
import {
  cities
} from './json/cites' // 你的路径
Page({

  /**
   * 页面的初始数据
   */
  data: {
    citys: cities,
    apl_index: 0,
    offTop: 0,
    searchCity: '',
    searchCityList: []
  },
  jumpTo: function (e) {
    // 获取标签元素上自定义的 data-opt 属性的值
    let target = e.currentTarget.dataset.opt;
    let index = e.currentTarget.dataset.index;
    this.setData({
      toView: target,
      apl_index: index
    })

  },
  getAplPos() {
    this.setData({
      apl_index: 0
    })
    wx.createSelectorQuery().select('.scrollBox').boundingClientRect((res) => {


      console.log(res)
      this.setData({
        offTop: res.top
      })

      let tab = this.data.citys
      let arr = []

      for (let i = 0; i < tab.length; i++) {
        wx.createSelectorQuery().select('#item' + i).boundingClientRect((res_i) => {
          // console.log(res_i)
          tab[i].top = res_i.top - this.data.offTop;
          this.setData({
            citys: tab,
            // apl_posArr: arr
          })

        }).exec()
      }


    }).exec()


  },
  onPageScroll(e) {
    //创建节点选择器
    let query = wx.createSelectorQuery();
    //选择id
    query.select('.scrollBox').boundingClientRect((rect) => {
      let scrollTop = e.detail.scrollTop
      let tabs = this.data.citys
      wx.showToast({
        title: tabs[this.data.apl_index].title,
        duration: 300,
        icon: 'none'
      })
      for (let i = 0; i < tabs.length; i++) {
        if (scrollTop > tabs[i].top && scrollTop < tabs[i + 1].top) {
          this.setData({
            apl_index: i
          })
        } else if (scrollTop >= tabs[tabs.length - 1].top) {
          // console.log(1)
          this.setData({
            apl_index: tabs.length - 1
          })
          return
        }
      }
    }).exec();
  },
  search() {
    if (this.data.searchCity != '') {
      // console.log(this.data.searchCity)
      let arr = []
      for (let i = 0; i < this.data.citys.length; i++) {
        this.data.citys[i].lists.filter((res) => {
          if (res.includes(this.data.searchCity)) {
            arr.push(res);
            this.setData({
              searchCityList: arr
            })
          }
        })
      }
      if (arr.length == 0) {
        wx.showToast({
          title: '查无此城市',
          icon: 'none'
        })
      } else {

      }
    } else {
      this.setData({
        searchCityList: []
      })
      if (this.data.searchCityList.length == 0) {
        wx.showToast({
          title: '请输入城市名称',
          icon: 'none'
        })
      }

    }

  },
  inputChange(e) {
    this.setData({
      searchCity: e.detail.value,
    });
  },
  changeCity(e) {
    let city = e.target.dataset.city
    wx.setStorageSync('city', city)
    getApp().globalData.city = city
    wx.navigateBack()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(cities)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getAplPos()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})