微信小程序之商品分类锚点定位
文章 6266 0 0 0
发布时间:2018年09月05日

概述

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

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

因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作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"

评论专区