|
|
// pages/material/subpage/newest/newest.js
|
|
|
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,
|
|
|
ac: false,
|
|
|
choose: false
|
|
|
},
|
|
|
to(e) {
|
|
|
if (this.data.choose) {} else {
|
|
|
wx.navigateTo({
|
|
|
url: e.currentTarget.dataset.url,
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 点击菜单栏触发的事件函数
|
|
|
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
|
|
|
})
|
|
|
},
|
|
|
tochoose () {
|
|
|
this.setData({
|
|
|
choose:!this.data.choose
|
|
|
})
|
|
|
|
|
|
},
|
|
|
choose (e) {
|
|
|
console.log(e)
|
|
|
this.setData({
|
|
|
ac:!this.data.ac
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
wx.setNavigationBarTitle({
|
|
|
title: '最新素材',
|
|
|
success: function (res) {}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage() {
|
|
|
|
|
|
}
|
|
|
}) |
