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

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

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

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

1.左侧

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

index.wxml

<view class="nav_left">
    <scroll-view scroll-y style="height:100%;" >
        <block wx:for="{{navLeftItems}}" wx:key="{{index}}">
        <!--当前项的id等于item项的id，那个就是当前状态-->
        <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
            <view id="zmz{{item.typeid}}" 
                   class="nav_left_items {{curNav == item.typeid ? 'active' : ''}}" 
                   bindtap="switchRightTab" 
                   bindtap="tap"  
                   data-index="{{index}}" 
                   data-id="{{item.typeid}}">{{item.typename}}</view>
        </block>
    </scroll-view>
</view>

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

<view class="nav_right">
        <!--如果有数据，才遍历项-->
        <view class="nav_right_one">
                <scroll-view class="scroll-view_H" scroll-y style="width: 100%;height:100%;" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" scroll-with-animation="true">
                        <block wx:for="{{navRightItems}}" wx:key="{{index}}" wx:for-item="item">
                            <view class="zmz-scroll-content-item" id="zmz{{item.typeid}}">
                                <view class="zmz-class-img">
                                    <image src="{{item.typeimage}}" class="zmz-imgs"></image>
                                </view>
                                <view class="zmz-scroll-content-title">{{item.typename}}</view>
                                <view class="zmz-grid-content">
                                    <view class="zmz-grid-row zmz-grid-row-clear">
                                        <navigator url="#" class="zmz-grid-row-item" wx:for="{{item.typelist}}" wx:key="{{index}}" wx:for-item="list">
                                            <view class="zmz-icon-large zmz-icon-sign"><image class="zmz-shop-box" src="{{list.childimage}}"></image></view>
                                            <text class="zmz-grid-row-label">{{list.childname}}</text>
                                        </navigator>
                                    </view>
                                </view>
                            </view>
                        </block>
                </scroll-view>
        </view>
        <!--如果无数据，则显示数据-->
        <!-- <view>暂无数据</view> -->
</view>

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

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

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

scroll-with-animation="true"