zoukankan      html  css  js  c++  java
  • 微信小程序scroll-view中的坑(因为动态设置高度导致无法下拉)

    感谢

    https://blog.csdn.net/zhoulib__/article/details/107517651

    微信小程序中使用scroll-view时,一般都是需要自行设置高度,因为不设置的话,显示的老小了,但是设置高度的话给一个定值也不合适,一般在移动端上面,界面通常是正好铺面当前的屏幕的大小,代码

    主要使用 calc这个计算 css

    首先获取当前scroll-view组件在屏幕中位置
    像这样

    data: {
        top:'',
      },
     let query = wx.createSelectorQuery()
        query.select('.scroll-view').boundingClientRect((e) => {
          // console.log(e)
          this.setData({
            top:e.top
          })
        }).exec()

    scroll-view组件

    <scroll-view   
        class="scroll-view"
        style="height:calc(100vh - {{top}}px);white-space:normal"  
        scroll-x="{{false}}" 
        refresher-enabled refresher-background="#F6F6F6" 
        bindrefresherrefresh="pull" 
        refresher-triggered="{{triggered}}" 
        bindscrolltolower="scrolltolower" 
        scroll-y
    >
    </scroll-view>

    这样写的话会遇到一个scroll-view无法下拉的问题(因为top的设置是异步的,还有微信小程序的组件总是有这些奇奇怪怪的问题,因为是异步更新了组件所以可能会导致一些奇奇怪怪的问题,所以要条件渲染,在获取到top之后再渲染scroll-view,防止scroll-view的重复渲染,让整个流程看上去像是同步的,而不是异步的)

    <view class="scroll-view">
        <scroll-view   
             wx:if="{{top}}"
            style="height:calc(100vh - {{top}}px);white-space:normal"  
            scroll-x="{{false}}" 
            refresher-enabled refresher-background="#F6F6F6" 
            bindrefresherrefresh="pull" 
            refresher-triggered="{{triggered}}" 
            bindscrolltolower="scrolltolower" 
            scroll-y
        >
        </scroll-view>
    </view>
    破罐子互摔
  • 相关阅读:
    [ZJOI2010]数字计数
    [SCOI2009]windy数
    [Tjoi2018]数学计算
    [ZJOI2008] 骑士
    [CQOI2009] 中位数
    11.7 模拟赛
    10.31 模拟赛
    随机游走
    10.29 模拟赛
    10.28 模拟赛
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/14852837.html
Copyright © 2011-2022 走看看