基于微信小程序wepy中 scroll-view滚动到指定位置（定位到id位置，使用 scroll-into-view）附带三层下拉框例子

                
                  
                     {{item.label || '-'}}
                  
                   {{item.label || '-'}}
                
              

重点：scroll-into-view（值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素，如bottomView111）

style="height:500rpx" 高度必须指定，

scroll-y="true"  Y轴   scroll-with-animation="true" 动画过渡

 下面是三层筛选下拉框,(基于小程序框架wepy)

1，新建文件TreeSelect3.wpy，把下面代码复制到这个文件

2.使用

如果我在b.wpy页面使用，那么在b.wpy页面引用并使用

import wepy from 'wepy';
import XxTreeSelect3 from '@/components/tree-select/TreeSelect3';

components = {
    XxTreeSelect3,
  };
  data = {
    tabList: [
      {
        label: '品类',
        value: 'category'
      },
      {
        label: '系列',
        value: 'series'
      },
      {
        label: '风格',
        value: 'style'
      },
      {
        label: '综合排序',
        value: 'sort'
      }
    ],
  chenpin: false,//可不用
   selectedTab: {},
 }

     methods = {
 // 选中标签
    handleMenu (data) {
      this.showLoading = true
      this.currentPage = 1;
      this.dataList = [];
      this.selectedTab = data;
      if (this.selectedTab.sort) {
        this.sort = this.selectedTab.sort.length > 0 ? this.selectedTab.sort[0].value : 3
        if (this.selectedTab.sort.length > 0) {
          if (this.selectedTab.sort[0].value) {
            this.sort = this.selectedTab.sort[0].value
          } else {
            this.sort = 3
          }
        } else {
          this.sort = 3
        }
      }
      this.getStoreGoods();
      this.$apply();
    }
}

tabList数组格式

 可以这么组成需要数组格式

  methods = {  
_getGoodsTress (list) {
    if (!list || !list.length) return [];

    return list.map(item => {
      return {
        label: item.content,
        value: item.id,
        children: this._getGoodsTress(item.subCategories)
      }
    })
  }

  getGoodsCategory () {
      axios.get(`/jzx/jzxStoreSupplier/getGoodsCategory`, {
        params: {
          storeId
        }
      }).then(res => {
        if (res && res.length) {
          this.getCategorylist = res
          this.tabList.map((item, index) => {
            if (item.value === 'category') {
              this.tabList[index].children = this._getGoodsTress(res);
            }
          })
          console.log(this.good_category)
          var good_category = this.good_category
          let category = JSON.parse(good_category.category).category;
          if (good_category.type == 123) {
            // 是首页icon跳转进来的
            var that = this
            this.getCategorylist.forEach(item => {

              if (category[0].value == item.id) {
                that.selectedTab.category[0].value = Number(item.id)
                that.selectedTab.category[0].children = item.subCategories
              }
            })
          }
          // 注意selectedTab.category[0].value只能传Number类型。
          console.log(this.selectedTab, '  this.selectedTab2')

        }

        this.$apply();
      }).catch(err => {
        console.log(err);
      });
    })
  };
// 风格列表
  getStyleList () {
    axios.get(`/article/get-style-tag-list`).then(res => {
      if (res) {
        this.tabList.map(item => {
          if (item.value === 'style') {
            item.children = res.map(item1 => {
              return {
                label: item1.name,
                value: item1.id
              }
            });


          }
        })
      }
      var tabList2 = JSON.stringify(this.tabList)
      wx.setStorage({ key: "tabList2", data: tabList2 })


      this.$apply();
    });
  };
  // 排序列表
  getSortList () {
    // axios.get(`/article/get-style-tag-list`).then(res => {
    //   if (res) {
    var res = [{ name: '价格升序', id: 2 }, { name: '价格降序', id: 1 }]
    this.tabList.map(item => {
      if (item.value === 'sort') {
        item.children = res.map(item1 => {
          return {
            label: item1.name,
            value: item1.id
          }
        });
      }
    })

    // }
    this.$apply();
    // });
  };
}