uni-app scroll-view滚动问题

uni-app scroll-view滚动问题

课程页面结构

导航

<view class="sn_box"></view>
<view class="sn_box sn_con">
  <navigator class="sn_backs" hover-class="none" open-type="navigateBack">
    <image class="sn_imgs" src="/static/3.bul/fanhui.png" mode=""></image>
  </navigator>
  <view class="sn_tit">{{ index_ajax.name || "更多课程" }}</view>
</view>

内容

搜索

<view class="search">
  <image class="search_imgs" src="/static/1.index/search.png" mode=""></image>
  <input type="text" name="" id="" class="search_inps" placeholder="请输入课程名称" placeholder-class="ph" v-model="inps" @confirm="to_s" />
  <view class="search_line"></view>
  <view class="search_btn" @tap="to_s">确定</view>
</view>

banner

<swiper class="bas" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="999999">
  <block v-for="(item, index) in index_ajax.banner" :key="index">
    <swiper-item>
      <image :src="api_url + item.url" mode=""></image>
    </swiper-item>
  </block>
</swiper>

排序

<view id="orders" class="orders">
  <block v-for="(item, index) in ol" :key="index">
    <view :class="`orders_item ${ol_ons == item ? 'orders_ons' : ''}`" @tap="o_do" :data-txt="item">
      <text>{{ item }}</text>
      <block v-if="index == 1">
        <view class="orders_line"></view>
        <image class="orders_imgs" :src="ol_imgs[ol_keys]" mode=""></image>
      </block>
    </view>
  </block>
</view>

筛选

<scroll-view id="cho" class="cho" :scroll-x="!sx_ons" :scroll-left="cho_nu" @scroll="sv_cho">
  <text class="cho_line"></text>
  <block v-for="(item, index) in cho_types" :key="index">
    <view :id="'cho_item' + index" :class="[ 'cho_item', item.vs && item.vs != item.names ? 'cho_sels' : '', item.ons ? 'cho_ons' : '', ]" @tap="tog_cho" :data-ks="index">
      <text class="cho_txt">{{ item.vs || item.names }}</text>
      <block v-if="item.ons">
        <image class="cho_imgs" src="/static/3.bul/cho_shangla.png" mode=""></image>
      </block>
      <block v-else>
        <image class="cho_imgs" src="/static/3.bul/cho_xiala.png" mode=""></image>
      </block>
    </view>
  </block>
  <text class="cho_line"></text>
</scroll-view>

课程列表

<view class="cla" :style="clas">
  <block v-if="lists && lists.length">
    <block v-for="(item, index) in lists" :key="index">
      <view class="cla_item" @tap="to_clas" :data-id="item.id">
        <image class="cla_imgs" :src="api_url + item.path" mode=""></image>
        <view class="cla_rig">
          <view class="cla_ts">
            <text class="cla_tits">{{ item.name }}</text>
          </view>
          <view class="cla_bots">
            <view class="cla_infos">
              <image class="cla_icon" src="/static/3.bul/times.png" mode=""></image>
              <text class="cla_txt">{{ item.time }}</text>
            </view>
            <view class="cla_infos">
              <image class="cla_icon" src="/static/3.bul/nu.png" mode=""></image>
              <text class="cla_txt">{{ item.num_person }}人学习</text>
            </view>
          </view>
        </view>
      </view>
    </block>
  </block>
  <block v-else>
    <view class="zanwu_str">
      <image class="zanwu_imgs" src="/static/zanwu.svg" mode=""></image>
      <view class="zanwu_str">暂无数据</view>
    </view>
  </block>
</view>

表格

字段 值
开发环境 HBuilder X 3.99
版本号 微信开发者工具 Stable 1.06.2401020
系统 Win10

更多关于uni-app scroll-view滚动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app scroll-view滚动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-app 中的 scroll-view 组件用于实现可滚动的视图区域，但在使用过程中可能会遇到一些滚动问题。以下是一些常见的 scroll-view 滚动问题及其解决方法：

1. 滚动不生效

  • 原因：scroll-view 的内容高度不够，或者 scroll-view 的高度设置不正确。

  • 解决方法：

    • 确保 scroll-view 的内容高度大于 scroll-view 的高度。
    • 给 scroll-view 设置一个固定的高度，或者使用 flex 布局来动态设置高度。
    <scroll-view style="height: 300px;" scroll-y>
  <!-- 内容区域 -->
</scroll-view>

2. 滚动条不显示

  • 原因：scroll-view 的 scroll-y 或 scroll-x 属性未设置，或者样式问题导致滚动条被隐藏。

  • 解决方法：

    • 确保 scroll-y 或 scroll-x 属性正确设置。
    • 检查样式，确保没有使用 overflow: hidden 等样式隐藏滚动条。
    <scroll-view scroll-y>
  <!-- 内容区域 -->
</scroll-view>

3. 滚动事件不触发

  • 原因：scroll-view 的 @scroll 事件未正确绑定，或者滚动事件被其他事件阻止。

  • 解决方法：

    • 确保 @scroll 事件正确绑定。
    • 检查是否有其他事件阻止了滚动事件的触发。
    <scroll-view scroll-y @scroll="handleScroll">
  <!-- 内容区域 -->
</scroll-view>

<script>
export default {
  methods: {
    handleScroll(event) {
      console.log('滚动事件触发', event);
    }
  }
}
</script>

4. 滚动到指定位置

  • 原因：需要手动控制 scroll-view 的滚动位置。

  • 解决方法：

    • 使用 scroll-top 或 scroll-left 属性来控制滚动位置。
    • 使用 scroll-into-view 属性滚动到指定子元素。
    <scroll-view scroll-y :scroll-top="scrollTop">
  <!-- 内容区域 -->
</scroll-view>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    };
  },
  methods: {
    scrollToPosition(position) {
      this.scrollTop = position;
    }
  }
}
</script>

5. 滚动性能问题

  • 原因：scroll-view 中内容过多，导致滚动卡顿。
  • 解决方法：
    • 使用 v-for 时，考虑使用 virtual-list 组件来优化长列表的渲染。
    • 尽量减少 scroll-view 中不必要的元素和样式。

6. 横向滚动问题

  • 原因：scroll-view 的宽度设置不正确，或者内容宽度不够。

  • 解决方法：

    • 确保 scroll-view 的内容宽度大于 scroll-view 的宽度。
    • 给 scroll-view 设置一个固定的宽度，或者使用 flex 布局来动态设置宽度。
    <scroll-view scroll-x style="width: 100%; white-space: nowrap;">
  <!-- 内容区域 -->
</scroll-view>

7. 滚动到顶部/底部

  • 原因：需要监听 scroll-view 的滚动到顶部或底部事件。

  • 解决方法：

    • 使用 @scrolltolower 和 @scrolltoupper 事件来监听滚动到顶部或底部的事件。
    <scroll-view scroll-y @scrolltolower="onReachBottom" @scrolltoupper="onReachTop">
  <!-- 内容区域 -->
</scroll-view>

<script>
export default {
  methods: {
    onReachBottom() {
      console.log('滚动到底部');
    },
    onReachTop() {
      console.log('滚动到顶部');
    }
  }
}
</script>

8. 滚动惯性问题

  • 原因：scroll-view 的滚动惯性效果不明显或不生效。

  • 解决方法：

    • 检查是否有样式或属性影响了滚动惯性效果。
    • 确保 scroll-view 的 scroll-with-animation 属性设置为 true。
    <scroll-view scroll-y scroll-with-animation>
  <!-- 内容区域 -->
</scroll-view>

9. 滚动时内容抖动

  • 原因：样式或布局问题导致滚动时内容抖动。
  • 解决方法：
    • 检查是否有样式影响了布局，例如 margin 或 padding 设置不当。
    • 确保 scroll-view 的内容布局稳定。

10. 滚动时图片加载导致抖动

  • 原因：图片加载时高度变化导致滚动抖动。

  • 解决方法：

    • 给图片设置固定高度或宽高比，避免加载时高度变化。
    • 使用 lazy-load 属性延迟加载图片。
    <scroll-view scroll-y>
  <image src="example.jpg" mode="widthFix" lazy-load></image>
</scroll-view>
回到顶部