微信小程序scroll-view实现滚动卡片
2022-03-04 本文已影响0人
苏苏哇哈哈
1.实现效果
scard.gif
2.实现原理
- scroll-view，设置scroll-y，竖向滚动，高度为整个页面的80%；
- 为卡片设置一定高度的margin-top，使卡片的初始高度在页面的底部；
- 在卡片的顶部设置横条，为卡片设置一个id，当点击的时候，动态的设置scrollInToView ,scroll-into-view="{{ scrollInToView }}";
3.实现代码
<view class="box">
<scroll-view scroll-y="true" scroll-with-animation="true" scroll-into-view="{{ scrollInToView }}" scroll-top="{{ scrollTop }}" bindscroll="bindScroll" class="scrollcard">
<view class="scrollcard-outter">
<view class="scrollcard-inner">
<view id="topview" class="scrollcard-ctrl" catchtap="toTop" data-toview="topview">
<view class="scbar"></view>
<scroll-view scroll-y="true" style="height: 94%;">
<scroll-view scroll-x class="img_sc" wx:for="{{4}}" wx:key="index">
<view wx:for="{{4}}" wx:key="idx">
<image src="https://i.postimg.cc/XJmpTvCD/susu2.jpg" mode="as"></image>
</view>
</scroll-view>
</scroll-view>
</view>
</view>
</view>
</scroll-view>
</view>
page {
height: 100%;
}
.box {
overflow: hidden;
position: relative;
height: 100%;
}
.scrollcard {
position: absolute;
bottom: 0;
height: 80%;
}
.scrollcard-outter {
box-sizing: border-box;
margin-top: 80%;
padding-top: 40rpx;
height: 100%;
}
.scrollcard-inner {
overflow: hidden;
height: 100%;
color: #333;
background-color: #fff;
border-radius: 60rpx 60rpx 0 0;
box-shadow: 0 0 40rpx rgba(0, 0, 0, .3);
}
.scrollcard-ctrl {
padding: 0 60rpx;
text-align: center;
height: 100%;
}
.scbar {
display: inline-block;
width: 120rpx;
height: 12rpx;
background-color: #333;
border-radius: 12rpx;
}
.img_sc {
margin-top: 30px;
white-space: nowrap;
}
.img_sc view {
display: inline-block;
}
.img_sc view image {
width: 281rpx;
height: 261rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
/* 去掉滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
