• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序:如何让scroll-view包含内容完整滚动

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

1.关于scroll-view

scroll-view是小程序用来控制可滚动视图区域的组件。

通过设置scroll-x ="true" 或 scroll-y="true" 来分别控制横向滚动或纵向滚动;这里需要注意的一点:

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height

 

2.使用scroll-view来实现一个介绍页长图的完整滚动显示

本以为是一个简单的需求,没想到也会采坑;

第一版实现思路及代码如下:

通过wx.getSystemInfoSync()获取设备高度,然后通过内联样式去给scroll-view组件height赋值

wxml

<scroll-view class="help-info" scroll-y="true" style="height:{{scrollHeight}}px">
    <image lazy-load="true" src="../../images/userGuide.jpg" mode="widthFix"></image>
</scroll-view>

 

wxss

.help-info {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.help-info image {
    display: block;
    width: 100%;
    height: 100%;
}  

 

js

Page({
    data: {
        scrollHeight: ''
    },
    onLoad: function() {
        let self = this;
        wx.getSystemInfo({
            success: function(res) {
                self.setData({
                    scrollHeight: res.windowHeight
                })
            }
        });
    }
})

 

测试结果:

图片在ios上不能显示完整,偶尔也会先不能滚动的情况

 

认真查找很久原因,发现是因为没有给scroll-view设置  overflow: auto;

wxss更改如下:

.help-info {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
}

.help-info image {
    display: block;
    width: 100%;
    height: 100%;
}

  

测试结果:

正常显示

 

总结:在使用scroll-view实现竖直滚动的时候,要设置下overflow: auto;这样才能正常显示

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之登录用户不是该小程序的开发者发布时间:2022-07-18
下一篇:
慕课学习手记!(完成查找书籍小程序~)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap