记录

小程序分类右侧商品置顶显示

  • 2022-08-21
  • 作者 我爱小小蝶
  • 750 字
  1. 1. 问题分析
    1. 1.1. 一、先点击左侧一个选项，并划到最低处
    2. 1.2. 二、切换另一个选项
    3. 1.3. 三、解决方法

问题分析

看滚动条的位置

一、先点击左侧一个选项，并划到最低处

二、切换另一个选项

我们可以看到，商品显示也是在最下面

三、解决方法

scroll-view标签里有个属性：

​ scroll-top ： 设置竖向滚动条位置

wxml:

1
2
3
<scroll-view scroll-y scroll-top="{{scrollTop}}">
	........
</scroll-view>

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
data: {
  // 左侧的菜单数据
  leftMenuList: [],
  // 右侧的商品数据
  rightContent: [],
   //当前被选中
   currentIndex:0,
   //右侧内容的滚动条距离顶部的距离
   scrollTop: 0

},
    
    
// 左侧菜单的点击事件
handleItemTap(e) {
  // console.log(e);
  const {index} = e.currentTarget.dataset;
  let rightContent = this.Cates[index].children;

  this.setData({
    currentIndex: index,
    rightContent,
    // 重新设置  右侧内容的滚动条距离顶部的距离
    scrollTop: 0
  })

},

点击事件给他一个初始值0即可，

到此问题解决！