微信小程序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+订阅！

微信小程序scroll-view实现滚动卡片相关推荐

微信小程序 -- 通知消息横向滚动 -- 无缝连接1
微信小程序 – 通知消息横向滚动 – 无缝连接1 wxml <view class="notice"><view class="left"&g ...
微信小程序-炫酷手持滚动弹幕生成小工具
微信小程序-炫酷手持滚动弹幕生成小工具欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
小程序scroll设置（滚动轴样式、真机测试不能滑动）
一.先说scroll真机测试不能滑动的问题 1.我做的项目是公司的一个小程序商城.产品是个妹子,UI+产品+运营,反正啥都会,尤其是提需求.要不是因为她比我重,我早就打她了.我本来已经做好了一个点击购 ...
微信小程序：公告字幕滚动播放（文字跑马灯效果）
一.需求公告文字仅限200字公告内容仅限一行文字显示公告内容持续滚动二.解决思路使用动画API(Animation.translate),完成移动动画使用定时器API(setInterva ...
微信小程序-封装原生垂直滚动菜单（类似外卖商品菜单）
效果展示: 就是根据左侧菜单点击,切换右侧显示的内容,可以上下滚动 colorUI组件库--垂直导航栏这种是通过原生的微信小程序制作的垂直导航栏,如果想要更好看的样式和效果,这里推荐一款小程序UI组 ...
微信小程序scroll事件/onPageScroll事件的延迟问题
需求在前端开发中,我们经常会遇到一个需求,在页面进行滚动操作的时候,当页面其中的某个元素滚动到某个位置,我们就让该元素停留在该位置.等到滚动小于某个值的时候,再让该元素继续随着页面滚动.这就是我们平 ...
微信小程序中view水平垂直居中
微信小程序布局中view有时候需要在水平方向和垂直方向上都居中,发现flex布局可以实现,例如view1(图中灰色方块)需要实现居中,可以用如下设置实现: wxss文件中的设置如下: .main {w ...
微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Progr ...

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

1.实现效果

2.实现原理

3.实现代码

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

微信小程序scroll-view实现滚动卡片相关推荐

最新文章

热门文章

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

1.实现效果

2.实现原理

3.实现代码

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

微信小程序scroll-view实现滚动卡片相关推荐

最新文章

热门文章

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