2019-05-17

 需求来源：小程序微信商品列表的左右联动

现在最流行的带分类商品列表，就是需要滚动到不同的商品的时候，自动聚焦到当前商品分类的分类按钮上，具体效果图如下：

（某团的外卖小程序...）

处理方法很简单，极其暴力，

就是把原有的商品列表，封装为小程序组件，然后把小程序组件放到scroll-view里面，很暴力有木有~！

示例代码：

原始写法：

```

   

       

   

```

这种写法，在商品数量少，标签少，setData()数据少的情况下，不会有明显的卡顿，一但超过50左右个商品的时候，就会卡得非常明显，无法实现实时联动，有时候甚至不动，得你重新触摸屏幕才有反应！

经过我多番研究，认为是scroll-view里面的标签太多，数据量大，导致渲染机制有问题，于是尝试用组件形式来存放列表，这样就相当于scroll-view下只有一个标签，组件就是另外一个渲染层了，跟小程序页面PageA的渲染层不一样。（这是我的猜想，有大佬看到跪求指点一下实际原理~感激不尽！）

暴力无脑解决办法：

搞一个组件goods-list

```

       

```

原来的页面

```

 

```

就酱解决了~

有同学问：弟弟你这没有小程序组件使用方法，我还是搞不定啊。

在此我要点名批评这位同学了~！那你还不赶紧打开这个页面去瞅瞅！https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ （我是条连接，点我带你飞）

具体如何实现滚动带动分类按钮，很多文章都有，查一下关键字：小程序微信商品列表的左右联动。有很多优质的文章，小弟就不再嫌丑了。

最后，希望这个有点sao的操作，能帮到正在为这个需求烦恼的人儿~

为认真看博客解决问题的人儿点赞~