uni-app:scroll-view滚动盒子,实现横(纵)向滚动条

这篇具有很好参考价值的文章主要介绍了uni-app:scroll-view滚动盒子,实现横(纵)向滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参照:scroll-view | uni-app官网 (dcloud.net.cn)

样式:

 uni-app:scroll-view滚动盒子,实现横(纵)向滚动条,uni-app,uni-app

 

代码:

<template>
	<view class="box">
			<scroll-view scroll-x="true" class="scroll">
				<view class="box1"> 
					<view class="item">111</view>
					<view class="item">222</view>
					<view class="item">333</view>
					<view class="item">444</view>
				</view>
			</scroll-view>
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss">
	.scroll{//设置盒子样式
		border:1px solid black;//设置盒子的外边框		
		box-sizing: border-box;// 内边框的设置,避免外边框导致右侧的边框不被展示
		height:200rpx;//给盒子定义一个总高度,一般下面的元素超过这个高度就不会被展示
		.box1{//设置所有item的总样式
			white-space:nowrap;//让内部的所有元素不换行
			.item{//设置小块元素的样式
				width:200rpx;//设置小块元素的宽
				height:200rpx;//设置小块元素的高
				background-color:pink;//设置小块元素的背景色
				display:inline-block;//设置小块元素,按照行进行排列,但如果超出长度就会换行,所以要加white-space:nowrap;
				margin-right:10rpx;//设置外边距	
			}
		}		
	}	
</style>

扩展:要设置纵向滚动条同理

只是需要将盒子高度小于实际小块的高度,就不会将元素完全展示,再给盒子加上scroll-y="true"(允许纵向滚动),即可

效果如下:

uni-app:scroll-view滚动盒子,实现横(纵)向滚动条,uni-app,uni-app

 代码:文章来源地址https://www.toymoban.com/news/detail-580460.html

<template>
	<view class="box">
			<scroll-view scroll-x="true" scroll-y="true" class="scroll">
				<view class="box1"> 
					<view class="item">111</view>
					<view class="item">222</view>
					<view class="item">333</view>
					<view class="item">444</view>
				</view>
			</scroll-view>
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss">
	.scroll{//设置盒子样式
		border:1px solid black;//设置盒子的外边框		
		box-sizing: border-box;// 内边框的设置,避免外边框导致右侧的边框不被展示
		// height:200rpx;//给盒子定义一个总高度,一般下面的元素超过这个高度就不会被展示
		height:100rpx;
		.box1{//设置所有item的总样式
			white-space:nowrap;//让内部的所有元素不换行
			.item{//设置小块元素的样式
				width:200rpx;//设置小块元素的宽
				height:200rpx;//设置小块元素的高
				background-color:pink;//设置小块元素的背景色
				display:inline-block;//设置小块元素,按照行进行排列,但如果超出长度就会换行,所以要加white-space:nowrap;
				margin-right:10rpx;//设置外边距	
			}
		}		
	}	
</style>

到了这里,关于uni-app:scroll-view滚动盒子,实现横(纵)向滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 小程序端使用uni-popup组件时,页面用了scroll-view滚动组件,uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案

    在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent=\\\"\\\" 和一个样式height: 100vh;    

    2024年02月10日
    浏览(61)
  • 小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

    Uniapp支持锚点连接,可以通过以下步骤实现锚点连接 一、在需要设置锚点的页面,为需要跳转的部分设置id属性。 例如,设置一个id为“section1”的元素: 二、在需要跳转到锚点的页面,使用 uni.navigateTo 或 uni.redirectTo 方法,搭配URL参数的方式实现跳转。 例如,跳转到id为“

    2024年02月14日
    浏览(58)
  • uniapp开发小程序—scroll-view实现内容滚动时, 标题也滚动

    scroll-view实现内容滚动时, 标题也滚动 完成

    2024年01月19日
    浏览(61)
  • uniapp利用scroll-view实现滚动触底加载

    可以使用以下这种方式来做滚动触底加载,但是官网提示长列表性能不太好,目前也没有更好的方式,暂时先这么处理。 微信小程序官方在scroll-view中也提供了一种触底加载的方式,也没有我写的这么复杂,在uniapp中要改写成vue的方式 @scrolltolower 才能生效,两个方式各有优劣

    2024年02月13日
    浏览(50)
  • 【uniapp】scroll-view 实现自动滚动到最底部

    在做uniapp项目中,有个滚动视图组件 scroll-view ,跟微信小程序里的组件一样的,想要实现自动滚动到最底部,是一件容易忽略的,小事情。 官网uniapp文档上说可以控制滚动条,并没有自动滚动到底部的设置选项,请看布局源代码,如下,大多数可能都是这样写的 🤔 虽然可

    2024年02月11日
    浏览(81)
  • 【uni-app】uni-app中scroll-into-view的使用

    在使用的时候需要注意: 需要给sroll-view组件设置宽或者高(根据横纵情况) white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑) 使用 scroll-into-view ,需要开启动画效果,并且动态绑定的值必须是字符串 并且子组件的上绑定一个id值用于定位 以上就是今天要讲的内容,

    2024年02月11日
    浏览(48)
  • scroll-view在小程序页面里实现滚动,uniapp项目

     要实现红框中的区域进行滚动,scroll-view必须写高  overflow-y:auto 不写也会滚动

    2024年01月17日
    浏览(45)
  • scroll-view不能滚动问题

    js 确定你想实现的滑动方向,检查一下scroll-x或者scroll-y有没有写(scroll-x:true 支持横向滑动 scroll-y:true 支持竖向滑动) 检查一下是不是没有给scroll-view设置一个固定的高度,我就是之前没有设置固定高度导致无法滑动的(注意 设置的高度不要超过父容器的高度,否则如果高度多大

    2024年02月13日
    浏览(57)
  • uniapp scroll-view横向滚动无效,scroll-view子元素flex布局不生效

    要素排查: 1.scroll-x属性需要开启,官方类型是Boolean,实际字符串也行。   2scroll-view标签需要给予一个固定宽度,可以是百分百也可以是固定宽度或者100vw。    3.子元素需要设置display: inline-block(行内块元素)属性,scroll-view需要设置white-space: nowrap(不换行) 当使用scroll

    2024年02月12日
    浏览(45)
  • 【微信小程序】scroll-view滚动

    wxml文件 wxss文件       wxml文件 wxss文件     注意事项: 1、在scroll-view标签上加上样式属性: display:flex; white-space:nowrap; 2、scroll-view标签下的一级栏目标签需要加上样式属性: display: inline-block; 只有结合上面两步,才能实现横向滚动。

    2024年02月13日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包