test/pages/info/roadInfo/index.js

// pages/info/roadInfo/index.js
let device = wx.getSystemInfoSync();
const ratio = device.windowWidth / 750;
import commonApi from "../../../utils/https/common"
let app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    fixed:false,
    type:1,
    top:0,
    info:null,
    comment:[],
    commentTotal:0,
    retailId:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let rect = wx.getMenuButtonBoundingClientRect();
    let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
    this.setData({
      top:height,
      id:options.id
    })
    if(options.retailId){
      this.setData({
        retailId:options.retailId
      })
    }
    let api = commonApi._post;
    if(wx.getStorageSync("jstrip_token")){
      api = commonApi.user_post;
    }
    api("product/get_product_detail",{
      id:options.id
    }).then(res=>{
      res.data.display_tags = (res.data.display_tags?res.data.display_tags.split(","):[]).splice(0,2);
      this.setData({
        info:res.data
      })
      this.BroswerRecord()
    })
    commonApi._post("product/product_comment_list",{
      product_id:options.id,
      offset:0,
      limit:3
    }).then(res=>{
      res.data.list.map(item=>{
        item.rate = Number(item.rate)
      })
      this.setData({
        commentTotal:res.data.total,
        comment:res.data.list
      })
    })
  },
  BroswerRecord:function(){
    setTimeout(()=>{
      if(app.globalData.uuid){
        commonApi._post('browse/browse_record',{
          type:"goods",
          title:this.data.info.title,
          drive:"mini",
          source_id:this.data.info.id,
          url:"/pages/info/cardInfo/index?id="+this.data.info.id,
          uuid:app.globalData.uuid
        }).then(res=>{
        })
      }
      else {
        this.BroswerRecord();
      }
    },500)
  },
  changeMenu:function(e){
    let index = e.currentTarget.dataset.index,that = this;
    const query=wx.createSelectorQuery();  //创建节点查询器
    query.select("#box"+index).boundingClientRect()  //选择toViewid获取位置信息
    query.selectViewport().scrollOffset()  //获取页面查询位置的
    query.exec(function(res) {
      let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.data.top;
      wx.pageScrollTo({
        scrollTop: scrollTop + 4,
        duration: 0
      })
      that.setData({
        type:index
      })
    })
  },
  onPageScroll:function(e){
    let that = this,height = this.data.top;
    let topHeight = height;
    wx.createSelectorQuery().select('#menus').boundingClientRect(function(rect){
      console.log(rect.top,topHeight)
      if(rect.top<=topHeight){
        // 此时应该把menus固定在顶部
        that.setData({
          fixed:true
        })
      }
      else{
        that.setData({
          fixed:false
        })
      }
      // 滚动时判断滚动到哪个部分了
      const query=wx.createSelectorQuery();  //创建节点查询器
      query.select("#box1").boundingClientRect()  //选择toViewid获取位置信息
      query.select("#box2").boundingClientRect()  //选择toViewid获取位置信息
      query.select("#box3").boundingClientRect()  //选择toViewid获取位置信息
      query.select("#box4").boundingClientRect()  //选择toViewid获取位置信息
      let minHeight = that.data.fixed?(110 * ratio + height): topHeight;
      query.exec(function(res) {
        if(res[3].top<minHeight){
          that.setData({
            type:4
          })
        }
        else if(res[2].top<minHeight){
          that.setData({
            type:3
          })
        }
        else if(res[1].top<minHeight){
          that.setData({
            type:2
          })
        }
        else {
          that.setData({
            type:1
          })
        }
      })
    }).exec()
    
  },
  order:function(){
    app.globalData.couponInfo = null;
    app.globalData.product = {
      product:this.data.info
    }
    app.globalData.retailId = this.data.retailId;
    wx.navigateTo({
      url: '/pages/order/road/index?id='+this.data.info.id
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})