解决scroll-view和swiper高度 设置为flex1（自己记录）

于 2024-03-02 11:12:33 发布
阅读量431 收藏 7
点赞数 10
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/song17631538490/article/details/136374416
版权

1.如何给scroll-view和swiper的高度设置为flex1   自己操作无法直接设置为flex1

但是可以给父盒子设置为flex：1 后  父盒子内的scroll-view和swiper 使用 子盒子绝对定位父盒子相对定位  的方法 吧  父盒子的flex：1 继承给 scroll-view和swiper

这样 scroll-view和swiper 的高度就可以 为flex：1了

你也是铃角怪
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解微信小程序之scroll-view的flex布局问题
10-17
主要介绍了详解微信小程序之scroll-view的flex布局问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
flex:1的大坑
weixin_48082900的博客
09-16 937
设置flex:1不生效,高度还是会超出父元素,如何解决?
overflow-x：scroll中使用flex布局
紫月i的博客
10-24 633
flex布局有一个默认的规则就是当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"
css3 flex:1
sfwk1993的博客
07-27 6615
最近在写vue的移动端项目，在展示订单信息的时候用到了better-scroll插件（以下简称BS），BS需要给父级wrapper一个高度，滚动视图content也需要一个高度，写固定高度肯定是不实际的，在不同系统不同设备上高度都是不同的，写固定高度的话就会出问题，于是乎flex: 1就派上了用场 flex:1 具体就不解释了，只需要知道要使用flex:1，必须在弹性模块中，既display: ...
开发随笔:flex:1被内部元素撑开问题解决办法
qq_24724109的博客
12-27 1万+
flex:1由于内部元素被撑开的问题 问题描述 当flex:1的元素当其子元素过长(文本过长)时，会直接撑开父元素 <!---html---> <div class="wrapper"> <div class="left">1</div> <div class="middle"> ...
css高度自适应屏幕_一招搞定微信小程序ScrollView等组件高度自适应
weixin_39635130的博客
11-29 978
你还在为 scroll-view 高度自适应问题而惆怅吗？你还在为 swiper 高度自适应而挠头吗？接下来，跟着我一招撸了他们！简介众所周知，scroll-view 和 swiper 是微信自带的两个非常常用的两个组件，当然也非常好用，但是好用的前提是你得先给他们设置固定的高度，我们来看看官网是怎么说的：如上图所示，官网明确提出了，scroll-view 是需要设置固定高度的。设置定高按照官网的...
flex解决微信小程序ScrollView等组件高度自适应
jiaojiaoiso的博客
05-18 3044
//获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; 小程序页面开发时经常需要用的scroll-view 和 swiper这两个组件，官方文档显示这两个组件需要设置固定的高度才好用。 当数据列表高度不确定的时候，一开始我是对scroll-view或者swiper高度计算出固定数据。 //获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; ...
微信小程序 scroll-view 高度问题
拿回忆下酒
08-25 1510
我们在开发小程序过程中，有很多场景下需要局部滚动，这是用scroll-view就可以实现了，但是我们发现它的高度有时会有问题 自适应高度 1、现在我们都习惯用弹性盒布局了，所以最方便的就是设定scroll-view的高度为 flex:1 2、部分手机高度 flex:1，有时还不好使。有可能是因为 scroll-view 的内容是动态渲染的，所以这里需要判断 一下 v-if 是否有数据 计算高度 onLoad: function (options) { let res = wx.getSys
利用小程序swiper组件结合flex布局实现轮播
HIRAETHZY的博客
04-30 3269
利用swiper组件结合flex布局实现如下图排版 1.首先在小程序中创建一个空目录，然后在index.wxml中添加以下代码： <!--index.wxml--> <swiper class="contentSlide" indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#625f5f" indicator-do...
微信小程序 swiper选项卡切换 flex弹性布局+scroll-view撑开高度
银鞍照白马的博客
04-17 3313
写swiper的时候高度无法撑开，也不想用js动态设置高度，就可以利用flex弹性布局来撑开高度，效果如下。 wxml部分 <view class='ranking fz32'> <view class='ranking-date bgFFF'> <picker mode="date" value="{{date}}" start="2015-09-01...
【uniapp】解决scroll-view滚动视图组件无法自适应高度问题
TA远方
11-30 4240
在做前端做页面通常使用的是弹性伸缩布局的，它的好处是，可以达到无缝拼接布局，充分占用剩余的空间布局，但有个滚动视图组件显然无法自适应高度，固定高度那不是自己想要的，现在要实现自适应高度，要怎么处理才好呢。
微信小程序完美解决scroll-view高度自适应问题的方法
10-14
主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度，现通过样式和布局实现高度自适应不设定高度
微信小程序scroll-view+swiper切换内容
最新发布
05-06
此功能多个swiper-item同时显示，通过tab栏滑动切换也可以点击切换，滑动内容，tab栏也会发生切换
小程序scroll-view设置flex-grow：1时滚动失效
weixin_42317515的博客
03-15 1959
有时候我们想让scroll-view占满屏幕剩余部分，于是就想到了flex-grow：1，但是发现在开发工具上有效，但是到了真机上就不能滚动了。 原因时scroll-view设置纵向滚动时必须要设置一个具体的高度。 解决方案: 给scroll-view加一个父元素，设置flex-grow：1，在页面加载时获取父元素的高度并赋值给scroll-view。 <view class="sc...
flex scroll 无效 与flex:1 无效问题以及flex:1底部图片显示不完全
weixin_44076777的博客
09-10 2353
flex scroll 无效 与flex:1 无效问题以及flex:1底部图片显示不完全
一招搞定微信小程序ScrollView等组件高度自适应
热门推荐
weixin_42826294的博客
07-09 1万+
你还在为 scroll-view 高度自适应问题而惆怅吗？你还在为 swiper 高度自适应而挠头吗？接下来，跟着我一招撸了他们！ 简介 众所周知，scroll-view 和 swiper 是微信自带的两个非常常用的两个组件，当然也非常好用，但是好用的前提是你得先给他们设置固定的高度，我们来看看官网是怎么说的： 如上图所示，官网明确提出了，scroll-view 是需要设置固定高度的。 设置定高 按照官网的提示，我们来给scroll-view设置高度： <view> <view cl
uni-app的scroll-view横向滚动导航,视频scroll-view纵向滚动导航可以滑动点击时可以跳转到播放页代码
08-10
### 回答1： 抱歉，我不是一个可以运行代码的程序，无法提供具体的代码实现。不过我可以给您提供一些思路。 针对横向滚动导航的问题，可以考虑使用 uni-app 中的 swiper 组件。在 swiper 中，可以通过设置 direction 属性为 horizontal 来实现横向滚动。 针对点击跳转到播放页的问题，可以在 swiper-item 中包裹一个 button，通过 button 的 tap 事件来触发页面跳转。跳转的目标页面可以使用 uni-app 提供的 navigate 或者 redirectTo 方法来实现。 针对纵向滚动导航的问题，可以使用 scroll-view 组件来实现纵向滚动。scroll-view 中可以通过设置 scroll-y 属性为 true 来实现纵向滚动。在 scroll-view 中，可以设置一个子元素作为导航菜单，通过子元素中包含的 button 来触发页面跳转。具体实现可以参考 uni-app 官方文档中的示例。 ### 回答2： 在uni-app中，可以使用scroll-view组件实现横向滚动导航和视频的纵向滚动导航，并在点击时跳转到播放页。下面是一个示例代码： 横向滚动导航： ```html <scroll-view scroll-x class="nav"> <view v-for="(item, index) in navList" :key="index" class="nav-item" @tap="navigateToPage(item)"> {{ item }} </view> </scroll-view> ``` ```css .nav { white-space: nowrap; } .nav-item { display: inline-block; padding: 10rpx; font-size: 28rpx; } ``` ```javascript export default { data() { return { navList: ['首页', '视频', '音乐', '图片'] // 导航菜单列表 } }, methods: { navigateToPage(item) { // 根据点击的导航菜单跳转到对应的页面 if (item === '视频') { uni.navigateTo({ url: '/pages/video-page' }) } else if (item === '音乐') { uni.navigateTo({ url: '/pages/music-page' }) } else if (item === '图片') { uni.navigateTo({ url: '/pages/image-page' }) } else { uni.navigateTo({ url: '/pages/home-page' }) } } } } ``` 纵向滚动导航： ```html <scroll-view scroll-y class="nav"> <view v-for="(item, index) in navList" :key="index" class="nav-item" @tap="navigateToPlayPage(item)"> {{ item }} </view> </scroll-view> ``` ```css .nav-item { margin-bottom: 10rpx; padding: 10rpx; font-size: 28rpx; } ``` ```javascript export default { data() { return { navList: ['视频1', '视频2', '视频3', '视频4'] // 视频列表 } }, methods: { navigateToPlayPage(item) { // 点击视频后跳转到播放页 uni.navigateTo({ url: '/pages/play-page?id=' + item.id // 传递视频id }) } } } ``` 在播放页中，可以通过uni-app提供的页面传参方式获取传递过来的视频id，并使用该id播放对应的视频。 以上就是一个基本的uni-app中scroll-view横向滚动导航和视频scroll-view纵向滚动导航点击跳转到播放页的示例代码。具体实现还需根据项目实际情况进行调整。 ### 回答3： 在uni-app中，如果要实现横向滚动导航，可以使用scroll-view组件。首先需要在页面上创建一个scroll-view组件，并设置它的scroll-x属性为true以启用横向滚动。然后在scroll-view组件内部定义一个导航栏容器，在容器内部添加导航项。 首先，在页面的template中添加如下代码： <scroll-view class="nav" scroll-x="true"> <view class="item">导航1</view> <view class="item">导航2</view> <view class="item">导航3</view> <view class="item">导航4</view> </scroll-view> 然后，在页面的style中添加如下样式： <style> .nav { display: flex; } .item { width: 100px; line-height: 36px; text-align: center; border: 1px solid #ccc; margin-right: 10px; } </style> 这样就可以实现一个简单的横向滚动导航了。 对于视频scroll-view纵向滚动导航，可以在导航项点击事件中使用uni.navigateTo方法跳转到播放页。首先需要在导航项上添加一个点击事件绑定，然后在事件处理函数中使用uni.navigateTo方法进行跳转。 在页面中的导航项上添加点击事件： <scroll-view class="nav" scroll-y="true"> <view class="item" @click="goToPlayPage">导航1</view> <view class="item" @click="goToPlayPage">导航2</view> <view class="item" @click="goToPlayPage">导航3</view> <view class="item" @click="goToPlayPage">导航4</view> </scroll-view> 在页面的methods中定义goToPlayPage方法： methods: { goToPlayPage() { uni.navigateTo({ url: '/pages/playPage/playPage' }); } } 这样点击导航项时就会跳转到播放页了。需要注意的是，播放页的路径需要根据实际情况进行设置。 以上是使用uni-app实现scroll-view横向滚动导航和视频scroll-view纵向滚动导航并跳转到播放页的代码。希望能对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值