UNIAPP实战项目笔记11 动态设置swiper内容的高度

r囧r小猫 2024-04-06 14:09 64阅读 0赞

### UNIAPP实战项目笔记11动态设置swiper内容的高度 ###

![动态设置swiper内容高度][swiper]

### 动态设置swiper的高度 ###

#### 使用onReady生命周期 ####

> onReady 是在初步完成渲染后才会执行,只有渲染完成后才能获取组件高度  
> 通过获取生成的内容高度,自动设置swiper高度

onReady() {
         // 初步渲染完后执行
                let view = uni.createSelectorQuery().select(".home-data"); // 获取dom节点对象
                // 获取节点对象数据
                view.boundingClientRect(data=>{
        
                    // 动态获取内容块的高度,动态渲染swiper高度
                    // 不要去试图计算可视区域的高度,在ios下有bug
                    this.clentHeight = data.height;
                }).exec();
            },

<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px'">
                    <swiper-item
                        v-for="(item,index) in topBar"
                        :key="index"
                    >
                        <view class="home-data">
                            <IndexSwiper></IndexSwiper>
                            <Recommend></Recommend>
                            <Card cardTitle='猜你喜欢'></Card>
                            <CommodityList></CommodityList>   
                        </view>
                        
                    </swiper-item>
                </swiper>

[swiper]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f81ce42526ac4fe2b996ac75a705dff1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关 UNIAPP实战项目笔记11 动态设置swiper内容的高度

UNIAPP实战项目笔记11动态设置swiper内容的高度 ![动态设置swiper内容高度][swiper] 动态设置swiper的高度使用onReady生

r囧r小猫/ 2024年04月06日 14:09/ 0 赞/ 65 阅读

相关 UNIAPP实战项目笔记3 Swiper部分开发

推荐: 1. 顶部滑动导航 2. swiper 名称: IndexSwiper 封装: 是 swiper的坑: 1.

Love The Way You Lie/ 2024年04月06日 12:47/ 0 赞/ 90 阅读

相关 UNIAPP实战项目笔记17 request的封装

UNIAPP实战项目笔记17 request封装 request封装 > 将请求对象的属性和方法进行封装，方便后期上线。 > 此处仅封装了get请求

川长思鸟来/ 2024年04月03日 09:23/ 0 赞/ 74 阅读

相关 UNIAPP实战项目笔记30 购物车内容块布局

UNIAPP实战项目笔记30 购物车内容块布局主要代码: 主要代码 shopcart.vue <template> <view clas

你的名字/ 2024年04月01日 12:09/ 0 赞/ 100 阅读

相关 UNIAPP实战项目笔记40 设置和地址的页面布局

UNIAPP实战项目笔记40 设置和地址的页面布局 my-config.vue 设置页面布局 > 具体图片自己替换哈，随便找了个图片的做示例代码 my-confi

古城微笑少年丶/ 2024年03月31日 08:44/ 0 赞/ 83 阅读

相关 uniapp-轮播图swiper根据内容图片高度自适应，解决获取图片高度不准确的问题

需求：轮播图swiper根据内容图片高度自适应但是通过uniapp`uni.createSelectorQuery`的方法获取图片高度不正确，比如图片是100，获取是200

痛定思痛。/ 2024年03月17日 22:10/ 0 赞/ 92 阅读

相关 uni-app swiper设置自定义高度

话不多少先上图， ![format_png][] 大家可以看到图片中红色区域是头部区域，黄色区域则是我们要滑动的区域。大家可以在uni-app官网上看

喜欢ヅ旅行/ 2023年07月02日 03:18/ 0 赞/ 8 阅读

相关 uniapp swiper高度自适应的100%完美解决方案

onReady() { //swiper高度自适应 this.getElementHeight('.swiper-item2') },

深碍√TFBOYSˉ_/ 2023年02月25日 03:39/ 0 赞/ 16 阅读

相关动态设置Cell的高度

\- (UITableViewCell \)tableView:(UITableView \)tableView cellForRowAtIndexPath:(NSIndexP

约定不等于承诺〃/ 2022年08月09日 18:42/ 0 赞/ 186 阅读

相关动态设置label的高度

UILabel \contentLabel=\[\[UILabel alloc\] initWithFrame:\_frame\]; CGRect frame=content

曾经终败给现在/ 2022年08月09日 14:38/ 0 赞/ 201 阅读