UNIAPP实战项目笔记16 上拉加载更多数据

已于 2022-10-05 14:26:46 修改
阅读量724 收藏 1
点赞数
分类专栏： uni-app 文章标签： javascript uni-app vue.js
于 2022-10-05 13:02:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gixome/article/details/127171529
版权

上拉加载更多数据

通过计算来实现页面的增加，每次请求自增页面，获取下一个页面的数据，并将数据累加的页面数据并渲染出来.

  • index.vue 下的 method 中方法

addData() 和 loadMore()

addData(callback){
                // 拿到索引
                let index = this.topBarIndex;
                // 拿到id
                let id = this.topBar[index].id;
                
                let page = Math.ceil(this.newTopBar[index].data.length/5) + 1;
                console.log(page);
                // 请求不同的数据
                uni.request({
                    url:`http://127.0.0.1:3000/api/index_list/${id}/data/${page}`,
                    success: (res) => {
                        if(res.statusCode != 200){
                            return;
                        }else{
                            let data = res.data.data;
                            this.newTopBar[index].data = [...this.newTopBar[index].data,...data]
                        }
                        // console.log(data);
                    }
                })
                // 请求结束后重新赋值
                this.newTopBar[index].load = 'last';
                
                if(typeof callback === 'function'){
                    callback();
                }
            },
            // 上拉加载更多
            loadMore(index){
                this.newTopBar[index].loadText = '加载中...';
                
                // 请求完数据，文字提示信息又换成【上拉加载更多...】
                this.addData(()=>{
                    this.newTopBar[index].loadText = '上拉加载更多...';
                })
            }

实例图片 下拉加载更多数据

实例图片

  • index.vue 的全部代码

  • 一下为首页的代码

<template>
	<view class="content">
        <view class="index">
            
            <scroll-view scroll-x="true" :scroll-into-view="scrollIntoIndex" class="scroll-content" >
                <view
                :id="'top'+index"
                    class="scroll-item"
                    v-for="(item,index) in topBar"
                    :key="index"
                    @tap="changeTab(index)"
                >
                    <text :class="topBarIndex===index?'f-active-color':'f-color'">{{item.name}}</text>
                </view>
            </scroll-view>
            
            <swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px'">
                <swiper-item
                    v-for="(item,index) in newTopBar"
                    :key="index"
                >
                    
                    <scroll-view @scrolltolower="loadMore(index)" scroll-y="true" :style="'height:'+clentHeight+'px;'">
                        <block v-if="item.data.length > 0">                            
                            <block v-for="(k,i) in item.data" :key="i">
                                <!-- 推荐 -->
                                <IndexSwiper v-if="k.type==='swiperList'" :dataList='k.data'></IndexSwiper>
                                <template v-if="k.type==='recommendList'">
                                    <Recommend :dataList='k.data'></Recommend>
                                    <Card cardTitle='猜你喜欢'></Card>
                                    <!-- 卡片要在下面显示，但是位置要放到上面 template 表示一个整体循环 -->
                                </template>
                                
                                <!-- 运动户外... -->
                                <Banner v-if="k.type==='bannerList'" :dataList='k.imgUrl'></Banner>
                                
                                <template v-if="k.type==='iconsList'">
                                    <Icons :dataList='k.data'></Icons>
                                    <Card cardTitle="热销商品"></Card>
                                </template>
                                
                                <template v-if="k.type==='hotList'">
                                    <Hot :dataList='k.data'></Hot>
                                    <Card cardTitle="推荐店铺"></Card>
                                </template>

                                <template v-if="k.type==='shopList'">
                                    <Shop :dataList='k.data'></Shop>
                                    <Card cardTitle="为您推荐"></Card>
                                </template>
                                
                                <CommodityList v-if="k.type==='commodityList'" :dataList='k.data'></CommodityList>
                                
                            
                            </block>
                        </block>
                        <view v-else>
                            暂无数据...
                        </view>
                        <view class="load-text f-color">
                            {{item.loadText}}
                        </view>
                    </scroll-view>
                    
                </swiper-item>
            </swiper>
            
            
            
            <!-- 推荐模板 -->
            <!-- <IndexSwiper></IndexSwiper>
            <Recommend></Recommend>
            <Card cardTitle='猜你喜欢'></Card>
            <CommodityList></CommodityList> -->
            
            <!-- 其他模板: 运动户外 美妆... -->
            <!-- <Card cardTitle='运动户外'></Card>
            <Banner></Banner>
            <Icons></Icons>
            <Card cardTitle='热销爆品'></Card>
            <Hot></Hot>
            <Card cardTitle='店铺推荐'></Card>
            <Shop></Shop>
            <Card cardTitle="为您推荐"></Card>
            <CommodityList></CommodityList>
            -->
        </view>
        
        <!-- <view class="f-active-color">
            文字
        </view>
        <view class="iconfont icon-xiaoxi"></view>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
	</view>
</template>

<script>
    import IndexSwiper from '@/components/index/indexSwiper.vue';//引入
    import Recommend from '@/components/index/Recommend.vue';//引入
    import Card from '@/components/common/Card.vue';//引入
    import CommodityList from '@/components/common/CommodityList.vue';//引入
    import Banner from '@/components/index/Banner.vue';//引入
    import Icons from '@/components/index/Icons.vue';//引入
    import Hot from '@/components/index/Hot.vue';//引入
    import Shop from '@/components/index/Shop.vue';//引入
	export default {
		data() {
			return {
                // 选中的索引
                topBarIndex:0,
                // 顶栏跟随的索引id值
                scrollIntoIndex:'top0',
                // 内容块的高度
                clentHeight:0,
                // 顶栏数据
                topBar:[],
                // 承载数据
                newTopBar:[],
				title: 'Hello'
			}
		},
        components:{
            IndexSwiper, //注册
            Recommend,
            Card,
            CommodityList,
            Banner,
            Icons,
            Hot,
            Shop
            
        },
		onLoad() {
            // 请求接口数据
            this.__init();
            
		},
        onReady() { // 初步渲染完后执行
            uni.getSystemInfo({
                success: (res) => {
                    // console.log(res);
                    // 可视区域高度 减去头部高度
                    this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight();
                }
            })
            /* let view = uni.createSelectorQuery().select(".home-data"); // 获取dom节点对象
            // 获取节点对象数据
            view.boundingClientRect(data=>{
                // 动态获取内容块的高度,动态渲染swiper高度
                // 不要去试图计算可视区域的高度,在ios下有bug
                this.clentHeight = 2000;
                // this.clentHeight = data.height;
            }).exec(); */
            // this.getClientHeight();
		},
		methods: {
            // 请求首页数据
            __init(){
                uni.request({
                    url:"http://127.0.0.1:3000/api/index_list/data",
                    success: (res) => {
                        // console.log(res.data.data);
                        let data = res.data.data;
                        this.topBar = data.topBar;
                        this.newTopBar = this.initData(data);
                    }
                })
            },
            // 添加数据
            initData(res){
                let arr = [];
                for (var i = 0; i < this.topBar.length; i++) {
                    let obj = {
                        data:[],
                        load:"first",
                        loadText:"上拉加载更多..."
                    }
                    // 获取首次数据
                    if (i==0) {
                        obj.data = res.data
                    }
                    arr.push(obj)
                }
                return arr;
            },
            // 点击顶栏
            changeTab(index){
                if (this.topBarIndex === index) {
                    return;
                }
                this.topBarIndex = index
                this.scrollIntoIndex = 'top'+index
                
                // 每一次滑动 load赋值为first
                if(this.newTopBar[this.topBarIndex].load == 'first'){
                    this.addData();
                }
            },
            // 对应滑动
            onChangeTab(e){
                this.changeTab(e.detail.current)
            },
            // 获取可视区域高度【兼容】
            getClientHeight(){
                const res = uni.getSystemInfoSync();
                console.log(res.platform,res.statusBarHeight);
                const system = res.platform;
                if ( system === 'iso') {
                    return 44 + res.statusBarHeight;
                }else if( system === 'android' ){
                    return 48 + res.statusBarHeight;
                } else{
                    return 0;
                }
            },
            // 对应显示不同数据
            addData(callback){
                // 拿到索引
                let index = this.topBarIndex;
                // 拿到id
                let id = this.topBar[index].id;
                
                let page = Math.ceil(this.newTopBar[index].data.length/5) + 1;
                console.log(page);
                // 请求不同的数据
                uni.request({
                    url:`http://127.0.0.1:3000/api/index_list/${id}/data/${page}`,
                    success: (res) => {
                        if(res.statusCode != 200){
                            return;
                        }else{
                            let data = res.data.data;
                            this.newTopBar[index].data = [...this.newTopBar[index].data,...data]
                        }
                        // console.log(data);
                    }
                })
                // 请求结束后重新赋值
                this.newTopBar[index].load = 'last';
                
                if(typeof callback === 'function'){
                    callback();
                }
            },
            // 上拉加载更多
            loadMore(index){
                this.newTopBar[index].loadText = '加载中...';
                
                // 请求完数据，文字提示信息又换成【上拉加载更多...】
                this.addData(()=>{
                    this.newTopBar[index].loadText = '上拉加载更多...';
                })
            }
		}
	}
</script>

<style>

.load-text{
    border-top: 2rpx solid #636263;
    line-height: 60rpx;
    text-align: center;
}
.scroll-content{
    width: 100%;
    height: 80rpx;
    white-space: nowrap;
}
.scroll-item{
    display: inline-block;
    padding: 10rpx 30rpx;
    font-size: 32rpx;
}
.f-active-color{
    padding: 10rpx 0;
    border-bottom: 6rpx solid #49BDFB;
}
.index{
    width: 100%;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>

后端接口的数据页面

数据请求页面

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* 首页第一次触底的数据 */
router.get('/api/index_list/1/data/2', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});
/* 运动户外第二次触底的数据 */
router.get('/api/index_list/2/data/3', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});
/* 运动户外第一次触底的数据 */
router.get('/api/index_list/2/data/2', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});


/* 运动户外第一次加载的数据 */
router.get('/api/index_list/2/data/1', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
            type:"bannerList",
            imgUrl:"../../static/img/b3.jpg",
          },
          {
              type:"iconsList",
              data:[
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"}
              ]
          },
          {
              type:"hotList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }
              ]
          },
          {
              type:"shopList",
              data:[
                  {
                      bigUrl:"../../static/img/b3.jpg",
                      data:[
                          {
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:4,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }
                      ]
                  }
              ],
          },
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 服饰内衣第一次加载的数据 */
router.get('/api/index_list/3/data/1', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
            type:"bannerList",
            imgUrl:"../../static/img/b3.jpg",
          },
          {
              type:"iconsList",
              data:[
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"}
              ]
          },
          {
              type:"hotList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }
              ]
          },
          {
              type:"shopList",
              data:[
                  {
                      bigUrl:"../../static/img/b3.jpg",
                      data:[
                          {
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:4,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }
                      ]
                  }
              ],
          },
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 首页推荐数据 */
router.get('/api/index_list/data', function(req, res, next) {
  res.send({
	  "code":0,
	  "data":{
		  topBar:[
			  {id:1,name:'推荐'},
			  {id:2,name:'运动户外'},
			  {id:3,name:'服饰内衣'},
			  {id:4,name:'鞋靴箱包'},
			  {id:5,name:'美妆个护'},
			  {id:6,name:'家居数码'},
			  {id:7,name:'食品母婴'}
		  ],
		  data:[
			  {
				  type:"swiperList",
				  data:[
					  {imgUrl:'/static/img/b3.jpg'},
					  {imgUrl:'/static/img/b3.jpg'},
					  {imgUrl:'/static/img/b3.jpg'}
				  ]
			  },{
				  type:"recommendList",
				  data:[
					  {
						  bigUrl:"../../static/img/b3.jpg",
						  data:[
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'}
						  ]
					  },{
						  bigUrl:"../../static/img/b3.jpg",
						  data:[
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'}
						  ]
					  }
				  ]
			  },{
				  type:"commodityList",
				  data:[
					  {
					      id:1,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
					  {
					      id:2,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },{
					      id:3,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
					  {
					      id:4,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
				  ]
			  },
		  ]
	  }
  })
});



module.exports = router;
ggome
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
1、使用uniapp编写。 2、新闻列表。 3、上拉刷新。 4、下拉加载更多。 5、图片在左，文字在右。
uniapp 实现上拉加载下拉刷新
m0_53398323的博客
12-30 1656
【代码】uniapp 实现上拉加载下拉刷新。
uniapp如何实现下拉刷新以及上拉加载
最新发布
programme_long的博客
04-11 915
首先第一步，我们需要去pages.js中开启下拉刷新如下：👇开启之后，就可以实现下拉刷新了，这里使用到到这里如果可以实现了说明成功了，如果没有实现说明没有成功!这里俺遇到了一些问题顺便拿出来了（万一有像我一样的**也遇到了呢，嘿嘿）：当我下拉刷新释放的时候发现，刷新的图标还在自己慢悠悠的转动，这里使用到了。
【uniapp】实现上拉加载、下拉刷新，以及分页效果
qq_36375343的博客
02-23 1371
【代码】【uniapp】实现上拉加载、下拉刷新，以及分页效果。
uniapp上拉加载更多与下拉刷新
前端小陈的成长记录
06-14 4190
uniapp上拉加载更多、下拉刷新、数据深拷贝
【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
$
02-20 7595
scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
uniapp实现上拉加载更多
ccz80的博客
07-26 7837
上拉加载实际上把一页分成好几页来加载，拉一下就加载一点点就这样。（累了直接上代码）这里match匹配空对象相当于全部哈。
uniapp上拉加载更多
m0_55333789的博客
03-08 345
uniapp上拉加载更多
uni-app 数据上拉加载更多功能
总结前端开发中遇到的问题，分享前端知识
03-23 5973
实现上拉加载更多 打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的商品goods_list 页面配置上拉触底的距离： "subPackages": [ { "root": "subpkg", "pages": [ { "path": "goods_detail/goods_detail", "style": {} }, { "path":..
uni-app上拉加载更多功能的实现
l17862868372的博客
07-28 1081
记录一下uniapp上拉加载更多功能的实现 1、导入load-more插件 链接：https://ext.dcloud.net.cn/plugin?id=29 可以直接导入插件 2、主要代码 <template> <view class="container"> <view v-for="(item,index) in videoList" :key="index">...</view> //渲染的列表处
uniapp学习实战笔记uniapp学习实战笔记
01-19
uniapp学习实战笔记uniapp学习实战笔记
下拉刷新_上拉加载更多_TableView
06-28
使用方法：直接在要用到相应TableView的页面，把UITableView换成例子中的HXLRefreshTableView，分别设置下拉刷新 和 上拉加载更多 view的可用性，并实现相应代理即可。 具体例子，请参照HXLRootVC类。 如有疑问，...
20220210uniapp项目笔记
02-10
20220210uniapp项目笔记
uni-app实现 上拉加载更多 添加节流阀避免多次请求
qq_41158525的博客
05-11 1199
uni-app实现 上拉加载更多 添加节流阀避免多次请求
uni-app上拉加载更多 --下拉刷新
逍遥的博客
03-18 2752
1、开启下拉功能在目录pages.json文件中找到首页位置给它添加“enablePullDownRefresh”: true完整代码如下 "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "backgrou...
uniapp前端项目实战案例
07-27
对于Uniapp前端项目实战案例，有很多选择。以下是一些常见的案例示例： 1. 社交应用：可以开发一个类似微信或QQ的聊天应用，包括聊天功能、好友列表、群组功能等。 2. 电商应用：可以开发一个包含商品展示、购物车、订单管理等功能的电商应用。 3. 新闻应用：可以开发一个新闻阅读应用，包括新闻列表、新闻详情、收藏功能等。 4. 音乐应用：可以开发一个音乐播放器应用，包括音乐列表、歌曲播放、歌词显示等功能。 5. 地图应用：可以开发一个类似百度地图的地图应用，包括地图展示、定位功能、路线规划等。 6. 教育应用：可以开发一个在线学习平台，包括课程列表、视频播放、笔记功能等。 这些案例只是其中的一部分，你可以根据自己的兴趣和需求选择适合的项目进行实战开发。Uniapp提供了跨平台的能力，可以同时在多个平台（如H5、小程序、App）上运行，具有很高的灵活性和扩展性。希望这些案例能给你一些启示！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值