微信小程序scroll-view实现滚动卡片

1.实现效果

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;
}

4.完整代码，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！