c***@e-buy.com
c***@e-buy.com
  • 发布:2024-03-22 16:15
  • 更新:2024-09-04 14:49
  • 阅读:450

ios开发scroll-view横向滚动失效,scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可

分类:uni-app

更正——这个问题有了最新的解决方案:
给scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可。经验证,ios、安卓段子展示均正常。
示例代码如下:

     <!-- 头部二级导航 -->  
        <scroll-view  
          class="header flex_wrap flex_row flex_left flex_middle"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
          <view class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>

如上, flex_row,flex_left,flex_middle均为封装好的样式,即横向、水平靠左、垂直居中布局。
————————————————————————————————————————————
老bug了,本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的,但是IOS App开发中子元素高度必须要大于scroll-view宽度才能滚动,应该是拿错参数了。
官方一直没解决这个问题,都是在自己摸索。
做了不少尝试,总算找到不影响页面布局展示的方法了。
解决方案:
用一个透明的宽度为1像素的占位View把内部容器的高度撑大,高度为子元素的总宽度,这样无论有多少个子元素,都能做到自适应滚动了。

具体操作如下:

  1. 在ScrollView里边给子元素列表添加一个父容器btnBox(如果已有就不用了)。
  2. 在获取到子元素数据之后通过dom.getComponentRect来获取btnBox的总宽度(图中蓝框所示)。
  3. 在btnBox前边或者后边添加一个同级的宽度为1像素的占位view,高度设置为btnBox的宽度(颜色设置为透明,避免部分机型可能会有的默认颜色)。

问题完美解决,横向可以滚动了,也不影响界面展示。
示例代码如下:

       <scroll-view  
          class="header flex_wrap flex_center bg_grey flex_top on"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
         <view id="navStart" class="bg_red" style="width:1rpx;" :style="{ height: subNavWidth * 2 + 'rpx' }"></view>  
          <view ref="subNav" class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>
      var refDom = this.$refs.subNav;  
      var result = dom.getComponentRect(refDom, option => {  
        this.subNavWidth = option.size.width;  
      });
1 关注 分享
2***@qq.com

要回复文章请先登录注册

2***@qq.com

2***@qq.com

兄弟你太棒了!
2024-09-04 14:49
c***@e-buy.com

c***@e-buy.com (作者)

还有一种方法,就是手动给scroll-view添加flex-row样式,也可以实现横向滚动,但是样式可能就需要重新调整了,感兴趣的可以试下
2024-03-25 11:27