EXEED_wxapp/pages/material/material.js

// pages/quest/quest.js
import {http} from "../../utils/util"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navItem: [{
      id: 0,
      name: '全部标签',
      is: false
    }, {
      id: 1,
      name: '全部日期',
      is: false
    }, {
      id: 2,
      name: '全部车型',
      is: false
    }],
    selectItem: [{
      id: 0,
      rank: [{
        name: '全部标签',
        is: true
      }, {
        name: '产品宣传',
        is: false
      }, {
        name: '媒体测评',
        is: false
      }, {
        name: '用户活动',
        is: false
      }, {
        name: '趣味互动',
        is: false
      }, {
        name: '用户互动',
        is: false
      }, {
        name: '媒体测评',
        is: false
      }, {
        name: '趣味活动',
        is: false
      }]
    }, {
      id: 1,
      rank: [{
        name: '全部日期',
        is: true
      }, {
        name: '一个月内',
        is: false
      }, {
        name: '三个月内',
        is: false
      }, {
        name: '半年内',
        is: false
      }, {
        name: '一年内',
        is: false
      }]
    }, {
      id: 2,
      rank: [{
        name: '全部车型',
        is: true
      }, {
        name: '星途追风ET-I',
        is: false
      }, {
        name: '星途追风',
        is: false
      }, {
        name: '星途TX',
        is: false
      }, {
        name: '星途凌云',
        is: false
      }, {
        name: '星途凌云S',
        is: false
      }, {
        name: '星途揽月',
        is: false
      }, {
        name: '揽月探享版至尊享受',
        is: false
      }]
    }],
    // 下拉选项，被选中那组的数据，由下面的js控制赋值
    selectedItem: [],
    // 记录菜单栏第几项被点开，方便对样式的绑定
    listNum: -1,
    // 下拉选项的隐藏和显示，默认隐藏
    showOrHide: false,
    questes: [],
    maxpage: 1,
    page: 1,
    cdn: getApp().globalData.cdn
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '素材中心',
      success: function (res) {}
    })
    wx.setBackgroundColor({
      backgroundColor: '#F9F9F9',
    })
    this.getdata()
  },
  to (e) {
    wx.navigateTo({
      url: e.currentTarget.dataset.url + '?id=' + e.currentTarget.dataset.id,
    })
  },
  getdata(){
    http("/referenceGroup/list", "post",{
      pageNum: this.data.page
    }).then(res=>{
      this.setData({
        questes:res.data.records
      })
    })
  },
  // 点击菜单栏触发的事件函数
  handleClick: function (e) {
    const index = e.currentTarget.dataset.id;
    const {
      selectItem,
      navItem
    } = this.data;
    // 点击事件，开始时一定会执行的，先令所有下拉选项先隐藏
    const promise = new Promise((res) => {
      this.setData({
        showOrHide: true
      })
      res()
    })
    promise.then(() => {
      // 定义一个延迟0.1秒的函数，和函数动画事件对上
      setTimeout(() => {
        // 当点击的是已经点开的菜单项，则隐藏
        if (this.data.listNum === index) {
          navItem[index].is = false
          // 重置所有样式
          this.setData({
            navItem,
            listNum: -1
          })
          return;
        } else {
          // 否则就令当前的index = listNum方便下一次判断
          this.setData({
            listNum: index
          })
        }
        // 令当前点击的菜单栏高亮
        navItem.forEach((v, i) => i === index ? v.is = true : v.is = false)
        // console.log(selectItem[index].rank)
        this.setData({
          showOrHide: true,
          selectedItem: selectItem[index].rank,
          navItem
        })
      }, 100)
    })
  },
  // 关闭下拉选项的函数
  // 两种情况下会关闭下拉选项
  //  1. 选择下拉选项，选择后被选的下拉选项高亮，关闭下拉选项列表
  //  2. 点击遮罩层关闭 
  closeMask: function (e) {
    let {
      navItem,
      listNum,
      selectedItem
    } = this.data;
    // 获取点击的下拉选项内容
    const {
      contant
    } = e.currentTarget.dataset
    // 被点击的下拉选项高亮
    selectedItem.forEach((v) => v.name === contant ? v.is = true : v.is = false)
    // 判断点击的是遮罩层还是下拉选项，如果是下拉选项则把选择的内容赋值到导航栏上，并且把v.is = false，让菜单栏高亮消失
    // 如果不是，不用赋值，直接把v.is = false，让菜单栏高亮消失
    contant ? (navItem.forEach((v, i) => {
      (i === listNum ? (v.name = contant) : (v.name = v.name));
      // (i === listNum ? ( e.currentTarget.dataset.id !== 0 ? v.is = true : v.is = false) : (v.is = v.is));
      v.is = false
    })) : (navItem.forEach((v) => v.is = false))
    // 调取借口触发筛选
    // console.log(navItem)
    this.setData({
      listNum: -1,
      showOrHide: false,
      navItem,
      selectedItem
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.onRefresh()
  },
  onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading()
    //loading 提示框
    wx.showLoading({
      title: 'Loading...',
    })
    console.log("下拉刷新啦");
    setTimeout(function () {
      wx.hideLoading();
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 2000)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.page === this.data.maxpage) {
      wx.showToast({
        title: '到底啦~',
        icon: 'none',
        duration: 2000
      })
    } else {
      this.setData({
        'page' : this.data.page + 1
      })
      this.getdata()
    }
  },

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

  }
})