<view class='conner'>
<scroll-view id='scroll_1' scroll-y='true' scroll-top='{{scroll_top}}'>
<view wx:for='{{menuclass_list}}' wx:key='{{item.id}}' class='scroll_1_titleview' wx:for-index='index' style='{{scroll_1_titleview_tapw==index||border_to_show==index?"border-left:8rpx solid #e99857;color:red":""}}' bindtap='scroll_1_titleview_tap' data-id='{{index}}'>{{item.name}}</view>
</scroll-view>
<view class='back_ccc'></view>
<scroll-view id='scroll_2' scroll-y='true' scroll-into-view='{{"into_"+scroll_1_titleview_tap}}' bindscroll='scroll_right'>
<view id='scroll_all'>
<view class='scroll_2_body' wx:for='{{menuclass_list}}' wx:key='{{item.id}}' wx:for-index='index' id='into_{{index}}'>
<view class='scroll_2_title'>{{item.name}}</view>
<view class='scroll_2_list'>
<navigator hover-class='none' wx:for='{{item.list}}' wx:key='{{item.id}}'>
<image class='scroll_2_image' mode='widthFix'></image>
<view class='scroll_2_text'>{{item.name}}</view>
</navigator>
</view>
</view>
</view>
</scroll-view>
</view>
page{
width:100%;
height:100%;
}
.conner {
width: 100%;
display: flex;
height: 100%;
}
scroll {
height: 100%;
}
#scroll_1 {
min-width: 25%;
width: 25%;
}
.back_ccc{
width:3%;
height: 100%;
background: #f6f6f6;
}
#scroll_2 {
width: 100%;
padding: 0 20rpx;
}
.scroll_1_titleview {
width: 100%;
height:10%;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
border-bottom:2rpx solid #e2e2e2;
border-right:2rpx solid #e2e2e2;
box-sizing: border-box;
}
.scroll_2_title{
text-align: center;
}
.scroll_2_list{
width: 100%;
overflow: hidden;
}
.scroll_2_list navigator{
width: 33.33333333333%;
float: left;
text-align: center;
}
.scroll_2_image{
width: 80%;
height: auto;
}
.scroll_2_text{
font-size: 26rpx;
}
const db = wx.cloud.database()
let scro_top = []
let news_index = 0
let conent = 0;
let window_height = ''
let scroll_top = ''
let times = null
let scross = 0
let Dom_top=0
let scroll_true=true
let envent=null
var conents = [
{
"parentId": "10001",
"name": "菜式菜品",
"list": [
{
"parentId": "10001",
"id": "1",
"name": "家常菜"
},
{
"id": "2",
"name": "快手菜",
"parentId": "10001"
},
{
"id": "3",
"name": "创意菜",
"parentId": "10001"
},
{
"id": "4",
"name": "素菜",
"parentId": "10001"
},
{
"name": "凉菜",
"parentId": "10001",
"id": "5"
},
{
"parentId": "10001",
"id": "6",
"name": "烘焙"
},
{
"id": "7",
"name": "面食",
"parentId": "10001"
},
{
"id": "8",
"name": "汤",
"parentId": "10001"
},
{
"name": "自制调味料",
"parentId": "10001",
"id": "9"
}
]
},
{
"parentId": "10003",
"name": "时令食材",
"list": [
{
"parentId": "10003",
"id": "19",
"name": "韭菜"
},
{
"id": "20",
"name": "春笋",
"parentId": "10003"
},
{
"name": "菠菜",
"parentId": "10003",
"id": "21"
},
{
"parentId": "10003",
"id": "22",
"name": "草莓"
},
{
"id": "23",
"name": "樱桃",
"parentId": "10003"
},
{
"id": "24",
"name": "苹果",
"parentId": "10003"
},
{
"id": "25",
"name": "猪肝",
"parentId": "10003"
},
{
"name": "鲫鱼",
"parentId": "10003",
"id": "26"
},
{
"id": "27",
"name": "排骨",
"parentId": "10003"
}
]
},
{
"parentId": "10004",
"name": "功效",
"list": [
{
"parentId": "10004",
"id": "28",
"name": "清肺"
},
{
"id": "29",
"name": "护肝",
"parentId": "10004"
},
{
"id": "30",
"name": "减肥",
"parentId": "10004"
},
{
"id": "31",
"name": "养胃",
"parentId": "10004"
},
{
"id": "32",
"name": "丰胸",
"parentId": "10004"
},
{
"id": "33",
"name": "排毒",
"parentId": "10004"
},
{
"id": "34",
"name": "补血",
"parentId": "10004"
},
{
"id": "35",
"name": "补钙",
"parentId": "10004"
},
{
"id": "36",
"name": "提高免疫力",
"parentId": "10004"
},
{
"id": "129",
"name": "美容",
"parentId": "10004"
},
{
"id": "130",
"name": "补肾",
"parentId": "10004"
},
{
"id": "131",
"name": "润肺",
"parentId": "10004"
},
{
"id": "133",
"name": "滋阴",
"parentId": "10004"
},
{
"id": "135",
"name": "抗衰老",
"parentId": "10004"
},
{
"id": "136",
"name": "降血压",
"parentId": "10004"
},
{
"id": "137",
"name": "祛痘",
"parentId": "10004"
},
{
"id": "139",
"name": "防癌",
"parentId": "10004"
},
{
"name": "增肥",
"parentId": "10004",
"id": "140"
},
{
"parentId": "10004",
"id": "142",
"name": "明目"
},
{
"id": "143",
"name": "防辐射",
"parentId": "10004"
},
{
"id": "144",
"name": "降血脂",
"parentId": "10004"
},
{
"name": "健脑益智",
"parentId": "10004",
"id": "145"
},
{
"id": "147",
"name": "增高",
"parentId": "10004"
},
{
"id": "148",
"name": "壮阳",
"parentId": "10004"
},
{
"id": "149",
"name": "乌发",
"parentId": "10004"
},
{
"id": "150",
"name": "调经",
"parentId": "10004"
},
{
"parentId": "10004",
"id": "151",
"name": "助睡眠"
},
{
"id": "152",
"name": "健脾胃",
"parentId": "10004"
},
{
"id": "153",
"name": "润肠通便",
"parentId": "10004"
}
]
},
{
"parentId": "10005",
"name": "场景",
"list": [
{
"id": "37",
"name": "早餐",
"parentId": "10005"
},
{
"id": "38",
"name": "午餐",
"parentId": "10005"
},
{
"id": "39",
"name": "下午茶",
"parentId": "10005"
},
{
"id": "40",
"name": "晚餐",
"parentId": "10005"
},
{
"id": "41",
"name": "夜宵",
"parentId": "10005"
},
{
"name": "踏青",
"parentId": "10005",
"id": "42"
},
{
"parentId": "10005",
"id": "43",
"name": "10分钟内"
},
{
"id": "44",
"name": "10-20分钟",
"parentId": "10005"
},
{
"id": "45",
"name": "半小时-1小时",
"parentId": "10005"
}
]
},
{
"parentId": "10007",
"name": "菜肴",
"list": [
{
"id": "57",
"name": "私房菜",
"parentId": "10007"
},
{
"id": "58",
"name": "下酒菜",
"parentId": "10007"
},
{
"id": "61",
"name": "小吃",
"parentId": "10007"
},
{
"id": "62",
"name": "海鲜",
"parentId": "10007"
}
]
},
{
"parentId": "10008",
"name": "主食",
"list": [
{
"id": "64",
"name": "饭",
"parentId": "10008"
},
{
"id": "65",
"name": "粥",
"parentId": "10008"
},
{
"id": "66",
"name": "面",
"parentId": "10008"
},
{
"id": "67",
"name": "粉",
"parentId": "10008"
},
{
"id": "68",
"name": "饼",
"parentId": "10008"
},
{
"name": "饺子",
"parentId": "10008",
"id": "69"
},
{
"parentId": "10008",
"id": "70",
"name": "馒头"
},
{
"id": "71",
"name": "包子",
"parentId": "10008"
},
{
"id": "72",
"name": "卷子",
"parentId": "10008"
}
]
},
{
"parentId": "10009",
"name": "西点",
"list": [
{
"name": "蛋糕",
"parentId": "10009",
"id": "73"
},
{
"parentId": "10009",
"id": "74",
"name": "面包"
},
{
"id": "75",
"name": "饼干",
"parentId": "10009"
},
{
"id": "76",
"name": "披萨",
"parentId": "10009"
},
{
"id": "77",
"name": "零食",
"parentId": "10009"
},
{
"id": "78",
"name": "果冻",
"parentId": "10009"
},
{
"id": "79",
"name": "糖果",
"parentId": "10009"
},
{
"id": "80",
"name": "布丁",
"parentId": "10009"
},
{
"id": "81",
"name": "挞类",
"parentId": "10009"
}
]
},
{
"parentId": "10010",
"name": "汤羹饮品",
"list": [
{
"id": "82",
"name": "羹",
"parentId": "10010"
},
{
"id": "83",
"name": "果汁",
"parentId": "10010"
},
{
"id": "84",
"name": "炖品",
"parentId": "10010"
},
{
"id": "85",
"name": "糖水",
"parentId": "10010"
},
{
"id": "86",
"name": "甜品",
"parentId": "10010"
},
{
"id": "87",
"name": "沙拉",
"parentId": "10010"
},
{
"name": "饮品",
"parentId": "10010",
"id": "88"
},
{
"parentId": "10010",
"id": "89",
"name": "冰品"
}
]
},
{
"parentId": "10011",
"name": "其他菜品",
"list": [
{
"id": "90",
"name": "便当",
"parentId": "10011"
},
{
"id": "91",
"name": "烧烤",
"parentId": "10011"
},
{
"id": "92",
"name": "寿司",
"parentId": "10011"
},
{
"id": "93",
"name": "火锅",
"parentId": "10011"
},
{
"id": "94",
"name": "酱汁",
"parentId": "10011"
},
{
"id": "95",
"name": "佐料",
"parentId": "10011"
},
{
"id": "96",
"name": "拼盘",
"parentId": "10011"
},
{
"id": "97",
"name": "杂烩",
"parentId": "10011"
}
]
},
{
"parentId": "10012",
"name": "人群",
"list": [
{
"id": "155",
"name": "孕妇",
"parentId": "10012"
},
{
"id": "156",
"name": "儿童",
"parentId": "10012"
},
{
"id": "157",
"name": "幼儿",
"parentId": "10012"
},
{
"id": "158",
"name": "老年人",
"parentId": "10012"
},
{
"id": "159",
"name": "考生",
"parentId": "10012"
},
{
"id": "160",
"name": "产妇",
"parentId": "10012"
},
{
"name": "运动员",
"parentId": "10012",
"id": "161"
},
{
"id": "162",
"name": "白领",
"parentId": "10012"
},
{
"parentId": "10012",
"id": "163",
"name": "司机"
}
]
},
{
"parentId": "10013",
"name": "疾病",
"list": [
{
"id": "164",
"name": "便秘",
"parentId": "10013"
},
{
"id": "165",
"name": "贫血",
"parentId": "10013"
},
{
"id": "166",
"name": "腹泻",
"parentId": "10013"
},
{
"id": "167",
"name": "感冒",
"parentId": "10013"
},
{
"name": "咳嗽",
"parentId": "10013",
"id": "168"
},
{
"id": "169",
"name": "甲亢",
"parentId": "10013"
},
{
"parentId": "10013",
"id": "170",
"name": "痛风"
},
{
"id": "171",
"name": "胃痛",
"parentId": "10013"
},
{
"name": "失眠",
"parentId": "10013",
"id": "172"
},
{
"parentId": "10013",
"id": "173",
"name": "健忘"
},
{
"id": "174",
"name": "骨折",
"parentId": "10013"
},
{
"id": "175",
"name": "痔疮",
"parentId": "10013"
},
{
"id": "176",
"name": "晕车",
"parentId": "10013"
},
{
"id": "177",
"name": "低血糖",
"parentId": "10013"
},
{
"name": "消化不良",
"parentId": "10013",
"id": "178"
},
{
"id": "179",
"name": "月经不调",
"parentId": "10013"
},
{
"parentId": "10013",
"id": "180",
"name": "口腔溃疡"
},
{
"id": "181",
"name": "骨质疏松",
"parentId": "10013"
}
]
},
{
"name": "日常",
"list": [
{
"id": "241",
"name": "聚会",
"parentId": "10020"
},
{
"parentId": "10020",
"id": "242",
"name": "熬夜"
},
{
"id": "243",
"name": "单身",
"parentId": "10020"
},
{
"id": "244",
"name": "二人世界",
"parentId": "10020"
}
],
"parentId": "10020"
}
]
Page({
data: {
menuclass_list: [],
border_to_show: 0,
scroll_1_titleview_tap: 0,
scroll_top: 0
},
onLoad: function(options) {
this.get_menuclass_list()
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
},
get_menuclass_list() {
// if (wx.getStorageSync('menuclass_list') == "") {
// db.collection('Menu').get().then(res => {
// this.setData({
// menuclass_list: res.data[0]['list']
// })
// wx.setStorageSync('menuclass_list', res.data[0]['list'])
// })
// } else {
// this.setData({
// menuclass_list: wx.getStorageSync('menuclass_list')
// })
// console.log(this.data.menuclass_list)
// }
this.setData({
menuclass_list: conents
})
const Dom = wx.createSelectorQuery() //获取右侧滚动高度
Dom.selectAll('.scroll_2_body').boundingClientRect()
Dom.selectViewport().scrollOffset()
Dom.exec((res) => {
res[0].forEach((vlaue, index) => {
conent += vlaue.height
scro_top.push(conent)
})
})
wx.getSystemInfo({
success: (res) => {
window_height = res.windowHeight
scroll_top = window_height * 0.2
}
})
},
scroll_right(e) { //滚动
scross = e.detail.scrollTop
let index = 0
for (var i = 0; i < scro_top.length; i++) {
if (scross >= scro_top[i - 1]) {
index = i
}
}
if (news_index != index) {
news_index = index
if (news_index >= 5) {
this.setData({
border_to_show: news_index,
scroll_top: scroll_top
})
} else {
this.setData({
border_to_show: news_index,
scroll_top: 0
})
}
}
},
scroll_1_titleview_tap(e) {
this.setData({
scroll_1_titleview_tap: e.target.dataset.id
})
},
})
真机运行数据渲染缓慢，滑动右边左边跟着变色，如果是滑动间歇很短的话不明显，如果是就滑动一次，数据渲染是等页面滚动结束才会渲染，这问题怎么解决呀，很着急麻烦帮忙看看
我把所有wx:key=“”去掉，流畅多了
可是有警告呀，看这很不舒服‘
’