UNIAPP实战项目笔记14 修复可视区域高度问题 滑动不同板块展示不同数据

已于 2022-10-05 08:49:20 修改
阅读量899 收藏 3
点赞数
分类专栏： uni-app 文章标签： uni-app javascript vue.js
于 2022-10-03 23:00:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gixome/article/details/127157568
版权

修复可视区域高度问题

  • 通过设置小程序和 iso 安卓APP 不同系统做兼容

app端会默认加入刘海屏高度，计算减去此高度即可

// 获取可视区域高度【兼容】
            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;
                }
            },

可以参看下面的index.vue 的整体代码

滑动不同板块展示不同数据

各组件设置为可传递数据参数

  • hot.vue

热门组件

<template>
    <view class="hot">
        <Commodity :dataList="dataList" itemW='250rpx' bigH="250rpx"></Commodity>
    </view>
</template>

<script>
    import Commodity from '../common/Commodity.vue'
    export default{
        props:{
            dataList:Array
        },
        data(){
            return {
                /*  */
            }
        },
        components:{
            Commodity
        }
    }
</script>

<style>
</style>
  • banner.vue

banner组件

<template>
    <view class="banner">
        <image class="banner-img" :src="dataList" mode=""></image>
    </view>
</template>

<script>
export default{
    props:{
        dataList:String
    }
}
</script>

<style lang="scss">
.banner{
    width: 100%;
    height: 300rpx;
}
.banner-img{
    width: 100%;
    height: 300rpx;
}
</style>
  • shop.vue

推荐店铺组件

<template>
    <view class="shop">
        <view class="shop-item" v-for="(item,index) in dataList" :key="index">
            <view class="shop-big">
               <image class="shop-big" :src="item.bigUrl" mode=""></image> 
            </view>
            <scroll-view class="scroll-content" scroll-x="true" >
                <view class="scroll-item">
                    <Commodity 
                    :dataList="item.data"
                    wrap='no-wrap'
                    itemW="200rpx"
                    bigH="200rpx"
                    nameSize="20rpx"
                    ></Commodity>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import Commodity from '../common/Commodity.vue'
export default{
    props:{
        dataList:Array
    },
    data(){
        return{
            /* shopList:[
                {
                    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"
                }
            ] */
        }
    },
    components:{
        Commodity
    }
}
</script>

<style lang="scss">
.shop-big{
    width: 100%;
    height: 350rpx;
}
.scroll-content{
    width: 100%;
    white-space: nowrap;
    height: 350rpx;
}
.scroll-item{
    display: inline-block;
    width: 300rpx;
    height: 300rpx;
}
</style>
  • icons.vue

宫格组件

<template>
    <!-- 宫格组件 -->
    <view class="icons">
        <view class="icons-item" v-for="(item,index) in dataList" :key="index">
            <image class="icons-img" :src="item.imgUrl" mode=""></image>
            <text class="icons-name f-color">{{item.name}}</text>
        </view>
        <!-- <view class="icons-item">
            <image class="icons-img" src="../../static/logo.png" mode=""></image>
            <text class="icons-name f-color">运动户外</text>
        </view>
        <view class="icons-item">
            <image class="icons-img" src="../../static/logo.png" mode=""></image>
            <text class="icons-name f-color">运动户外</text>
        </view>
        <view class="icons-item">
            <image class="icons-img" src="../../static/logo.png" mode=""></image>
            <text class="icons-name f-color">运动户外</text>
        </view>
        <view class="icons-item">
            <image class="icons-img" src="../../static/logo.png" mode=""></image>
            <text class="icons-name f-color">运动户外</text>
        </view>
        <view class="icons-item">
            <image class="icons-img" src="../../static/logo.png" mode=""></image>
            <text class="icons-name f-color">运动户外</text>
        </view>
        <view class="icons-item">
            <image class="icons-img" src="../../static/logo.png" mode=""></image>
            <text class="icons-name f-color">运动户外</text>
        </view>
        <view class="icons-item">
            <image class="icons-img" src="../../static/logo.png" mode=""></image>
            <text class="icons-name f-color">运动户外</text>
        </view> -->
    </view>
</template>

<script>
export default{
    props:{
        dataList:Array
    }
}

</script>

<style lang="scss">
.icons{
    display: flex;
    flex-wrap: wrap;
}
.icons-item{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20rpx;
}
.icons-img{
    width: 110rpx;
    height: 110rpx;
}
</style>
  • 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 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>
                    </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:[]
                    }
                    // 获取首次数据
                    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
                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(){
                // 拿到索引
                let index = this.topBarIndex;
                // 拿到id
                let id = this.topBar[index].id;
                // 请求不同的数据
                uni.request({
                    url:`http://127.0.0.1:3000/api/index_list/${id}/data/1`,
                    success: (res) => {
                        let data = res.data.data;
                        // console.log(data);
                        this.newTopBar[index].data = [...this.newTopBar[index].data,...data]
                    }
                })
            } 
		}
	}
</script>

<style>
.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>

自定义服务器接口

  • 服务器数据接口更改

index.js
保存后重启服务器哈

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/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;
以下为接口文档

二、 首页分类数据
1.1 接口功能

获取首页分类数据

1.2 URL

地址 /api/index_list/栏目的 id/data/数量

1.3 支持格式

JSON

1.4 HTTP 请求方式

GET

1.5 请求参数

| 参数 | 必选 | 类型 | 说明 |

1.6 返回字段

返回字段字段类型说明
codestring返回结果状态 0：正常；1：错误
dataobject首页数据

1.7 接口实例

{
	"code":"0",
	"data":{
		topBar:[
			{
				id: 1,
				name: '推荐'
			}
			....
		],
		data:[
			{
				type:"swiperList",
				data:[
					{
						imgUrl:'../../static/img/swiper1.png'
					}
				]
			}
		]
	},
}
ggome
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp学习实战笔记uniapp学习实战笔记
01-19
uniapp学习实战笔记uniapp学习实战笔记
【uniapp 微信小程序】可视区域的高度
AAAXiaoApple的博客
09-07 296
【uniapp 微信小程序】可视区域的高度
uniapp 页面设置高度百分百，当页面超过百分百的时候底部会出现一块白色解决方案
qq_42628556的博客
04-08 1832
使用scroll-view包裹，并且给scroll-view设置高度100%
uni-app scroll-view可视范围判断
最新发布
pgLi
06-18 156
scroll-view可视范围判断
解决uniapp设置了position: fixed；样式布局塌陷问题
FUFCY的博客
05-23 1662
子组件设置position: fixed;父组件引用真机上出现问题，小程序没有，是因为子组件的第一层的类名和父组件第一层类名相同导致的，所以改类名不一样就可以了
uni-app小程序端折叠面板uni-collapse组件出现的问题——高度无法动态变化
小多的博客
01-24 5561
问题：使用 uni-collapse 时，在H5/移动端使用正常更新，在小程序端添加数据面板不会动态更新，需点击折叠按钮
uni-app可视化窗口高度兼容
wangkun12344的博客
10-15 902
uni-app可视化窗口高度兼容
echarts数据可视化项目教程项目笔记源码
05-08
**ECharts 数据可视化项目教程详解** ECharts 是一个由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，支持自定义交互和动画效果，广泛应用于Web数据可视化场景。在这个...
Android项目开发实战笔记.pdf
11-17
Android项目开发实战笔记.pdf
react入门实战项目-类印象笔记应用源码
08-11
上个资源记录分享了如何使用React实现一个ToDoList小Demo,通过该Demo,菜鸟们可以学会如何搭建环境，新建项目，添加组件，运行项目，简单的数据处理和交互，如何引入样式文件等内容。本篇，将记录如何使用React实现一...
《数据分析之道 用数据思维指导业务实战》读书笔记（上）
03-28
《数据分析之道 用数据思维指导业务实战》这本书深入探讨了数据思维在业务实践中的重要性和培养方式，以及数据指标体系的构建。以下是根据书中的内容提取的关键知识点。 **数据思维** 1. **定义**：数据思维是数据...
基于uniapp 选项卡滑动 解决高度不适应 demo
weixin_49885784的博客
04-25 567
基于uniapp 选项卡滑动 解决高度不适应 demo 使用框架 uview <template> <view> <view class="status_bar"><!-- 这里是状态栏 --></view> <u-tabs :list="list" :is-scroll="false" :current="current" @change="clickTab"></u-tabs> <swiper :
关于uni-app开发H5端和app端页面高度计算问题
拥抱星星的月亮的博客
08-14 731
需求是消息只需要在内容区域滚动，而且适配H5和APP。uni-app好像在app端flex:1并没用，至少我这边真机运行是这种情况，所以，这边使用了条件渲染语法，在H5端内容区域flex:1,而在app端如下，通过uni.getSystemInfoSync()获取屏幕高度然后减去topbar和如下计算出来的“搜索”的高度。如上这么处理，页面高度无论在哪种机型上都正常。
uniapp-轮播图swiper根据内容图片高度自适应，解决获取图片高度不准确的问题
个人博客
07-19 1633
到是能解决，但是不稳定，有时200ms能正确，有时不能，再设置久一点，用户体验不好，图片等待时间太久了。获取图片高度，但返回的图片高度还是不正确，太坑了，但load里再使用。的方法获取图片高度不正确，比如图片是100，获取是200，需求：轮播图swiper根据内容图片高度自适应。研究了一下，图片加载完成时间@load里，也能。的方法获取图片高度则正确了。但是通过uniapp。
如何在uni-app中计算出微信小程序导航栏的高度
热门推荐
qq_35430000的博客
03-21 1万+
为什么要拿到导航栏的高度 拿到导航栏的高度当然是为了自定义导航栏，uniapp默认为我们提供了一个导航栏，也就是每个页面上面的标题，但如果对这个默认的导航栏不满意，我们就可以选择自定义导航栏，比如我在下面，为了满足业务需求，放了一个搜索框，取代了原先的标题栏。 不仅仅是在导航栏放放东西，如果你要导航栏自定义大背景，也需要自定义导航栏，如下(图片来源网络)： 小程序头部的几个参数 如果我们要开启页面自义定导航栏，以首页index为例，我们要在pages.json中加入以下代码，它默认是defa
uni-app swiper 滑动切换 高度自适应
yhd1998的博客
12-30 1569
图片懒加载所以uview 组件库
//调用uni-app接口获取屏幕高度
m0_58358831的博客
11-03 648
【代码】//调用uni-app接口获取屏幕高度。
uniapp触底加载
waterwo的博客
03-15 9554
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、onReachBottom()函数首先，在page.json的style下设置然后在页面使用即可，与生命周期函数同一级别二、在子组件中使用滚动区域scrow-view触底加载1.添加scroll-view组件2.设置height3.在methods方法中写入触底加载的业务逻辑 一、onReachBottom()函数 首先，在page.json的style下设置 "pages": [ { "path": "page.
uniapp自定义头部，计算状态栏和导航栏高度超简单三步
stars______的博客
07-13 7260
1.pages.json 页面给要自定义头部的页面加入一行代码。height 通过拿取胶囊的高度和距离头部距离算出的高度。tops是状态栏的高度 height是导航栏的高度。2.页面js代码（和onLoad同级）
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
weixin_51002293的博客
11-05 4426
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值