实现它的功能并不难，直接sroll-view往上怼。个人觉得，京东优选在这里有一点不足的地方就是，如果点击了偏右侧的导航栏目的话，导航条不会跟着右移显示后面的项目，可能它的开发者有不一样的想法吧。
<view> <scroll-view scroll-x="true" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"> <block wx:for="{{navData}}" wx:for-index="id" wx:for-item="navItem" wx:key="id"> <view data-name="{{navItem.name}}" data-current="{{id}}" bindtap="switchNav"> {{navItem.name}} </view> </block> </scroll-view> </view>
通过js可以实现动态的填放数据，这里设置的current就是当前选择的栏目，可以根据这个改变样式等。
switchNav(e) { const cur = e.currentTarget.dataset.current; // Number let currData = [] // console.log(cur.toString()); if (cur === 0) { currData = this.data.goods } else { this.data.goods.forEach(val => { if (val.category === cur.toString()) { currData.push(val) } }) } this.setData({ currentTab: cur, category: cur, currData }); }
如果是要实现点击之后自动向点击的方法滑出显示更多的内容，可以通过动态改变navScrollLeft的值去实现，这里我就不细说了，不过我在实现的时候还是花了一番功夫，实现的不是很好所以就没有放在代码里，如果你以后想做出这种效果的导航栏建议去网上搜一搜demo看懂了之后借过来用一用，毕竟传说程序猿最高的境界是复制粘贴，狗头(误)
上拉菜单和筛选框
这两个比较相似，只是拉出的位置不一样，这里我就举一个筛选框的例子，我们先看看它长啥样：
我们先看看结构，这里我省略了中间的一些内容：
<!-- 点击筛选弹出的选择菜单 --> <view> <view animation="{{animation}}"> ...中间自己放的具体内容... <!-- 底部的两个按钮 --> <view> <view bindtap="reset">重置</view> <view bindtap="success">确定</view> </view> </view> </view>
/* 筛选弹框 */ /* 弹框的布局 */ .isRuleShow { display: block; } .isRuleHide { display: none; } .float { height: 100%; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; /* 弹出后背景的颜色 */ background-color: rgba(0, 0, 0, 0.5); padding-left: 30rpx; padding-left: 30rpx; /* margin-top:80rpx; */ } .animation-element { width: 600rpx; height: 100%; padding-left: 30rpx; padding-right: 30rpx; background-color: #ffffff; border: 1px solid #f3f0f0; position: absolute; right: -550rpx; box-sizing: border-box; } .bottom { width: 600rpx; height: 110rpx; font-size: 32rpx; padding-top: 55rpx; position: absolute; bottom: 0; left: 0; right: 0; display: flex; } .animation-reset { width: 50%; height: 100%; line-height: 50%; text-align: center; padding-top: 55rpx; border-top: 1px solid #EFEFF4; } .animation-button { width: 50%; height: 100%; line-height: 50%; color: #fff; text-align: center; background-color: #ED7358; padding-top: 55rpx; }
重点是它的显示和隐藏事件，需要用到animation，如果有不熟悉animation，可以去参考一些资料，或者是官方文档。同样，我也去掉了我实现其他业务的一些内容。
showSelect() { // 显示选择菜单 this.setData({ isRuleTrue: true }) // 左偏移245 step表示一个动作的开始 this.animation.translate(-245, 0).step() this.setData({ animation: this.animation.export() }) }, success: function () { // 关闭选择菜单 this.setData({ isRuleTrue: false, selected: true }) this.animation.translate(0, 0).step() this.setData({ animation: this.animation.export() }) },
购物车逻辑
