最新:2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段,以下文章内容和就不改了
刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段,需要的大哥拿去随便改改,先看效果图:
代码如下:
wxml
<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" >
<view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick">
<view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view>
<view class="currtline {{currentTab === index ? 'active' : ''}}"></view>
</view>
</scroll-view>
wxss
.scroll-wrapper {
white-space: nowrap;
-webkit-overflow-scrolling: touch;
background: #FFF;
height: 90rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.navigate-item {
display: inline-block;
text-align: center;
height: 90rpx;
line-height: 90rpx;
margin: 0 16rpx;
}
.names {
font-size: 28rpx;
color: #3c3c3c;
}
.names.active {
color: #00cc88;
font-weight: bold;
font-size: 34rpx;
}
.currtline {
margin: -8rpx auto 0 auto;
width: 100rpx;
height: 8rpx;
border-radius: 4rpx;
}
.currtline.active {
background: #47CD88;
transition: all .3s;
}
JS
const app = getApp()
Page({
data: {
currentTab: 0,
taskList: [{
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, ]
},
onLoad() {
},
handleClick(e) {
let currentTab = e.currentTarget.dataset.index
this.setData({
currentTab
})
},
})
进收藏夹吃灰去吧!
你这个例子如果能做吸顶效果,又可以左右滑动,互不影响各个选择卡的内容及位置,向上滑又可以加载更多数据,我就真是服你了
是这样么?
scroll-view可以横向自动滑到指定位置吗?就是先选了一个靠后的导航,然后点底部切换页面,在点回来的时候scroll-view的位置是之前选的导航的位置,而不是我要从头往后滑才能看见我选中的那个导航(左上角返回不影响,互相跳转页面就不行了,请问有办法解决吗)
this.setData({
currentTab: getApp().globalData.currentTab
})
<scroll-view scroll-x="true" scroll-into-view="{{intoindex}}" scroll-with-animation>
<view wx:for="{{brand_data}}" id="text{{item.sub_id}}" wx:key="item" bindtap="switchSkin" data-type="{{item.type}}">
{{item.name}}
view>
scroll-view>
之前没发现scroll-into-view属性,刚试了下这个属性也可以实现,switchSkin()获取绑定的data-type当做id赋值给intoindex,然后在<scroll-view>scroll-view>里的子元素绑定一个id="text{{item.sub_id}}",(需要吧sub_id存在本地,在onload里取出来给intoindex重新赋值),这样就实现了,感谢大佬回复
//横向滚动到指定位置
var intoindex = util.getStorageSync(config.b + ':current_brand');
that.setData({
intoindex:'text' + intoindex.sub_id
})
这个太棒了,完美解决!!!
老哥你这个高度是定死的吗?需要上拉刷新可以实现吗
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
你是个好人!!!!!!
感谢分享,刚好解决了我的一个问题
很奈斯。
但是怎样在下面弄一个类似于微商城的页面版块的代码呢?
老哥,好银。
感谢大佬