微信小程序之商品分类锚点定位

最近开始做小程序，通读一遍文档再上手并不算难，但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转，一个商品分类的效果示意图如下：

因为在微信小程序的环境中不能想在浏览器里设置标签，或者操作dom滚动，传统做法就行不通了，一切都得按小程序的文档来。

所以追梦猪结合scroll-view组件来完成微信小程序分类页面侧滑的效果，

1.左侧

先说一下左侧菜单的操作点击单个菜单切换样式，而这个锚点定位也是需要在菜单上添加对应的标志，我这运用了添加后台传过来的菜单id应为菜单id是唯一的不会出现冲突（唯一要注意的就是id不能以数字开头我们用的是：zmz1，zmz2，字符串进行拼接的标识），还要绑定我们的点击事件，如图

index.wxml

    
        
        
        
            {{item.typename}}
        
    

index.js

//事件处理函数
switchRightTab: function (e) {
    // 获取item项的id，和数组的下标值
    let id = e.target.dataset.id,
    index = parseInt(e.target.dataset.index);
    // 把点击到的某一项，设为当前index
    console.log(e)
    console.log(this)
    this.setData({
    curNav: id,
        curIndex: index,
    })
},

2.右侧

在编写右侧商品分类的时候我们要去看一下官方的组件，我们需要用到如图标记的参数，scroll-y是规定滚动条是y（竖）轴还是x（横）轴，我们这个就是y，在需要滚动的scroll-view上加上scroll-into-view参数，这个就是我们锚点定位的关键参数，我们点击左边的navid（zmz1），那么scroll-info-view也要变成对应的参数（zmz1），

index.wxml

        
        
                
                        
                            
                                
                                    
                                
                                {{item.typename}}
                                
                                    
                                        
                                            
                                            {{list.childname}}
                                        
                                    
                                
                            
                        
                
        
        
        

index.js我们添加了tap点击事件，来进行切换也可以跟上面的合并

tap: function (e) {
    var navLeftItems = this.data.navLeftItems;
    var id = e.currentTarget.id;
    this.setData({
        toView: id
    })
},

还有最后一步，给锚点加上动画效果这样会更加流畅

scroll-with-animation="true"