uniapp 上拉加载 没有 scroll-x

<template>

  <view>

    <scroll-view

      scroll-x

      class="bg-white nav"

      scroll-with-animation

      :scroll-left="scrollLeft"

    >

      <view

        class="cu-item"

        :class="index == TabCur ? 'text-green cur' : ''"

        v-for="(item, index) in tabsList"

        :key="index"

        @tap="tabSelect"

        :data-id="index"

      >

        {{ item.title }}

      </view>

    </scroll-view>

    <view class="flex px-4 py-2 bg-white" style="z-index: 999">

      <u-search

        shape="round"

        placeholder="搜索"

        v-model="params.key"

        :show-action="false"

        inputAlign="start"

        height="35"

        @search="onsearch"

      ></u-search>

    </view>

    <!-- 数据为空 -->

    <u-empty

      v-if="news.length == 0"

      text="暂无数据"

      mode="data"

      icon="http://cdn.uviewui.com/uview/empty/data.png"

    />

    <!-- 数据为空 -->

    <view v-else class="px-3 pt-2">

      <view

        class="bg-white p-4 mt-2"

        style="border-radius: 10rpx"

        @tap="skip_examine(item)"

        v-for="(item, index) in news"

        :key="index"

      >

        <view class="flex">

          <image

            :src="item.cover"

            mode="aspectFill"

            style="width: 124rpx; height: 124rpx; border-radius: 10rpx"

          ></image>

          <view class="flex flex-column justify-between mx-2 py-1">

            <view class="flex flex-column">

              <text style="color: #545457; font-size: 28rpx">{{

                item.title

              }}</text>

            </view>

            <text style="color: #9f9f9f; font-size: 22rpx; margin-top: 15rpx">{{

              item.author

            }}</text>

          </view>

        </view>

      </view>

    </view>

    <u-loadmore

      v-if="news.length != 0"

      class="py-4"

      :status="status"

      :icon="true"

      loadmore-text="正在努力加载中..."

      nomore-text="没有更多了"

      @loadmore="loadmore"

    />

  </view>

</template>

<script>

export default {

  onLoad() {},

  onShow() {

    this.mytab();

    this.params.page_index = 1;

    this.getdata();

  },

  data() {

    return {

      scrollLeft: 0,

      tabsList: [],

      TabCur: 0,

      status: "loadmore", //加载更多样式使用

      news: [],

      params: {

        key: "",

        catalog_id: "",

        sign: "",

        page_size: 10,

        page_no: 1,

      },

    };

  },

  methods: {

    mytab() {

      var sign = this.$route.query.sign;

      this.$post(

        "/Article/GetCatalogs",

        { sign },

        {

          isLoading: false,

        }

      ).then((res) => {

        var aaa = {

          id: "",

          title: "全部",

        };

        res.data.unshift(aaa);

        this.tabsList = res.data;

      });

    },

    onsearch() {

      this.params.page_index = 1;

      this.getdata();

    },

    tabSelect(e) {

      this.TabCur = e.currentTarget.dataset.id;

      var index = this.TabCur;

      console.log(e, 456);

      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;

      this.load_status = false;

      this.params.catalog_id = this.tabsList[this.TabCur].id;

      this.params.page_index = 1;

      this.getdata(); //获取tabs下的菜单

    },

    loadmore(e) {

      console.log(e);

    },

    getdata() {

      this.$post("/Article/GetArticles", this.params, {

        isLoading: false,

      }).then((res) => {

        this.params.page_count = res.data.page_count;

        //判断获取数据是否为空，为空就清空数据，主要用于搜索

        if (this.params.page_index == 1) {

          this.news = [];

        }

        res.data.list.map((obj) => {

          if (this.news.indexOf(obj) == -1) {

            this.news.push(obj);

          }

        });

        if (this.news.length < this.params.page_count) {

          console.log(123);

          this.status = "loadmore";

        } else {

          this.status = "nomore";

        }

      });

    },

    //跳转审核

    skip_examine(item) {

      var obj = "/pages/my/HelpCenter/HelpDetail?id=" + item.id; //路径或参数

      this.$open_page(obj);

    },

    //跳转记录

    skip_record() {

      var url = "/pages/domain/record";

      this.$open_page(url);

    },

  },

  // 下拉刷新

  onPullDownRefresh() {

    setTimeout(() => {

      this.status = "loadmore";

      this.params.page_index = 1;

      this.getdata();

      uni.stopPullDownRefresh(); //停止刷新

    }, 2000);

  },

  //触底加载更多 分页

  onReachBottom(e) {

    // 当前的页码值 * 每页显示多少条数据 < 总数条数

    if (

      this.params.page_size * this.params.page_index <

      this.params.page_count

    ) {

      this.params.page_index++;

      setTimeout(() => {

        this.getdata();

      }, 1000);

    }

  },

};

</script>

<style>

page {

  background-color: #f7f7f7;

}

</style>