自学内容网 自学内容网

uniapp 截取两条数据 进行页面翻页滚动

// 轮播信息
<view class="sales_list" >
            <view class="sales_item" v-for="(item,index) in sellDisplayList" :key="index" @click="salesFn(item)">
              <image :src="item.goodsImg"></image>
              <u--text :text="item.name" bold ></u--text>
            </view>
          </view>

 data() {
    return {
      sellList:[],
      sellDisplayList:[],
      sellIndex: 0,
}
 },
 created() {
 const params = {
        pageNum: 1,
        pageSize: 10,
      }
      //后端返回数据接口
    secondaryGoods(params).then(res=>{
      this.sellList = res.rows
      this.updatesecondaryGoods(); // 初始化显示数据
      setInterval(() => this.updatesecondaryGoods(), 4000); // 每3秒钟更新显示数据
    })},
methods:{
updatesecondaryGoods() {
      // 获取当前要显示的两条数据
      this.sellDisplayList = this.sellList.slice(
        this.sellIndex,
        this.sellIndex + 1
      );
      // 更新当前索引,循环滚动
      this.sellIndex = (this.sellIndex + 1) % this.sellList.length;
    },
}

原文地址:https://blog.csdn.net/abcdef_520/article/details/140438068

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!