zoukankan      html  css  js  c++  java
  • 小程序:如何让scroll-view包含内容完整滚动

     

    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;
         100%;
    }
    
    .help-info image {
        display: block;
         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;
         100%;
        overflow: auto;
    }
    
    .help-info image {
        display: block;
         100%;
        height: 100%;
    }
    

      

    测试结果:

    正常显示

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

  • 相关阅读:
    laravel-13-笔记-1
    laravel-14-笔记-2
    supervisor监听器-linux安装配置
    laravel-12-artisan命令创建view文件
    linux修改主机名
    laravel-11-laravel 模型Eloquent ORM
    laravel-composer安装laravel
    laravel-10-laravel collection集合
    laravel-8-laravel数据填充
    laravel-9-laravel数据库查询 查询组件
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/9074271.html
Copyright © 2011-2022 走看看