收藏
回答

scroll-view

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 客户端 6.73 2.41

<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

})

},

})








真机运行数据渲染缓慢,滑动右边左边跟着变色,如果是滑动间歇很短的话不明显,如果是就滑动一次,数据渲染是等页面滚动结束才会渲染,这问题怎么解决呀,很着急麻烦帮忙看看


最后一次编辑于  2018-12-02  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • Lid
    Lid
    2018-12-04

    我把所有wx:key=“”去掉,流畅多了

    2018-12-04
    赞同
    回复 1
    • *^_^*
      *^_^*
      2018-12-04

      可是有警告呀,看这很不舒服‘


      2018-12-04
      1
      回复