精华内容
下载资源
问答
  • 1. scroll-view默认是不滚动的。。所以要先设置scroll-x=true或者scroll-y=true 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了。所以要scroll-view的样式要...
  • scroll-view横向滚动

    2021-10-13 15:46:28
    scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view class="box"> 1 </view> <view class="box"> 2 </view> <view class=...
    <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
    	<view class="box">
    	1
    	</view>
    	<view class="box">
    	2
    	</view>
    	<view class="box">
    	3
    	</view>
    	<view class="box">
    	4
    	</view>
    	<view class="box">
    	5
    	</view>
    	<view class="box">
    	6
    	</view>
    </scroll-view>
    
    .scroll-view_H {
    	height: 230rpx;
    	overflow: hidden;
    	white-space: nowrap;
    }
    .box{
    	display: inline-block;
    	width: 200rpx;
    	height: 200rpx;
    }
    

    scroll-view横向滚动需要样式设置overflow: hidden;white-space: nowrap;
    scroll-view里面的内容要设置display: inline-block;

    展开全文
  • 今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display:i ...       最近刚好在集中scroll-view的文章和跳坑指南;  今天介绍微信小程序...
  • 本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下 效果图 实现代码 index.wxml <scroll scroll-x=true class=scroll-view-x xss=removed scroll-with-animation=true wx:if={...
  • uniapp scroll-view横向滚动 底部自定义滚动条 1.效果 2.代码 <template> <view style="margin: 0rpx;"> <scroll-view scroll-x="true" class="images-view" @scroll="scroll2"> <view ...

    uniapp scroll-view横向滚动 底部自定义滚动条
    1.效果
    在这里插入图片描述
    2.代码

    <template>
    	<view style="margin: 0rpx;">
    		<scroll-view scroll-x="true" class="images-view" @scroll="scroll2">
    			<view class="images-view-item" v-for="(item,index) in imageList" :key="index">
    				<image src="../../static/cs1.jpg" class="images-view-item"></image>
    			</view>
    
    		</scroll-view>
    		<progress :percent="percent" border-radius="10" stroke-width="8" backgroundColor="#999" activeColor="#FF7C0E" />
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				imageList: [1, 2],
    				percent: 10,
    			}
    		},
    		methods: {		
    			scroll(event) {
    				var num1 = event.detail.scrollWidth / 2
    				var num2 = event.detail.scrollLeft
    				var p = (num2 / num1) * 100;
    				this.percent = p;
    				if (p === 0) {
    					this.percent = 10;
    				}
    			},
    		}
    	}
    </script>
    
    <style >
    
    
    	.images-view {
    		width: 100%;
    		overflow: hidden;
    		white-space: nowrap;
    		margin-top: 10rpx;
    		margin-bottom: 10rpx;
    	}
    
    	.images-view-item {
    		display: inline-block;
    		width: 100%;
    		/* margin-right: 20rpx; */
    	}
    </style>
    
    
    展开全文
  • uniapp scroll-view横向滚动 自定义底部指示器样式 1.效果 2.思路:动态设置元素的margin 3.代码 <template> <view style="margin: 0rpx;"> <scroll-view scroll-x="true" class="images-view" @...

    uniapp scroll-view横向滚动 自定义底部指示器样式
    1.效果
    在这里插入图片描述2.思路:动态设置元素的margin

    3.代码

    <template>
    	<view style="margin: 0rpx;">
    		<scroll-view scroll-x="true" class="images-view" @scroll="scroll">
    			<view class="images-view-item" v-for="(item,index) in imageList" :key="index">
    				<image src="../../static/cs1.jpg" class="images-view-item"></image>
    			</view>
    
    		</scroll-view>
    		<!-- <progress :percent="percent" border-radius="10" stroke-width="8" backgroundColor="#999" activeColor="#FF7C0E" /> -->
    
    		<view class="progressBg">
    			<view class="progressAction" :style="{marginLeft: `${progressMargin}%`}"></view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				imageList: [1, 2],
    				progressMargin:0
    			}
    		},
    		methods: {
    			scroll(event) {
    				//
    				console.log("距离每个边界距离" + event.detail.scrollWidth);
    				console.log("距离x距离" + event.detail.scrollLeft);
    				var num1 = event.detail.scrollWidth / 2
    				var num2 = event.detail.scrollLeft
    				var p = (num2 / num1) * 100;
    				
    				this.progressMargin = Math.round(p)-10;
    				console.log("percent==>" + this.progressMargin);
    				if (this.progressMargin < 0) {
    					this.progressMargin = 0;
    				}
    				if (this.progressMargin >99) {
    					this.progressMargin = 90;
    				}
    				// if (p >=100) {
    				// 	this.progressMargin = 80;
    				// }
    			},
    		}
    	}
    </script>
    
    <style >
    	
    	.progressAction{
    		width: 10%;
    		height: 15rpx;
    		border-radius: 20rpx;
    		background-color: #FF7C0E;
    	    /* margin-left: 50%; */
    	}
    	.progressBg {
    		width: 100%;
    		height: 15rpx;
    		border-radius: 20rpx;
    		background-color: #999999;
    
    	}
    
    	.images-view {
    		width: 100%;
    		overflow: hidden;
    		white-space: nowrap;
    		margin-top: 10rpx;
    		margin-bottom: 10rpx;
    	}
    
    	.images-view-item {
    		display: inline-block;
    		width: 100%;
    		/* margin-right: 20rpx; */
    	}
    </style>
    
    

    4.解释:this.progressMargin = Math.round§-10;减去10 是 .progressAction
    width: 10%; 减去的是指示器的宽度10%

    展开全文
  • 小程序的scroll-view用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢,ios上直接就不显示啊,也是没谁了。深入想了一下,这滚动条能不能换一颜色...
  • scroll-view scroll-x="true" class="scrollView"> <view v-for="(item,index) in arr" :key="index">{{item}}</view> </scroll-view> CSS代码(经测试此方法不可以): .scrollView{ width:...

    HTML代码:

    <scroll-view scroll-x="true" class="scrollView">
    	<view v-for="(item,index) in arr" :key="index">{{item}}</view>
    </scroll-view>
    

    CSS代码(经测试此方法不可以):

    .scrollView{
    		width: 100%;
    		height: 100rpx;
    		display: flex;
    		flex-wrap: nowrap;
    	}
    	.scrollView view{
    		width: 200rpx;
    		line-height: 100rpx;
    		text-align: center;
    	}
    

    视图:
    在这里插入图片描述
    问题:scroll-view横向滚动未生效

    原因:元素自动换行导致宽度达不到效果

    解决方法:给scroll-view标签加上 white-space: nowrap; 属性就可以滚动了

    注意:
    1. display: flex; flex-wrap: nowrap; 并不能替代 white-space: nowrap; 的效果
    2. 需要给view设置 display: inline-block; 使view成为行内块元素

    CSS代码(经测试可以实现):

    .scrollView{
    	width: 100%;
    	height: 100rpx;
    	white-space: nowrap;
    }
    .scrollView view{
    	display: inline-block;
    	width: 200rpx;
    	line-height: 100rpx;
    	text-align: center;
    }
    

    视图:
    在这里插入图片描述

    展开全文
  • scroll-view class="menu-list" :scroll-into-view="goIndex" scroll-x="true"> <view v-for="(item,k) in timeList" :key="k" :id='"id" + k' @tap="sel(k,item)" class="ListBox">
  • 今天想要实现一个能左右滑动的tab栏的时候,使用了scroll-view横向滚动,但是不起作用 解决方案 参考这篇文章,得到了解决 1.在外层scroll-view设置white-space: nowrap;样式 2.在内部元素层设置display: inline-block;...
  • 其实总结具体需求就是使用scroll-view横向滚动到某个指定位置。 使用scroll-view的标签,设置滚动的方向为x轴,与此同时设置scroll-into-view属性的值(scroll-into-view的值就是子元素中的id,表示滚动到哪一个元素...
  • 1、单排横向滚动 html <scroll-view scroll-x="true" class="kite-classify-scroll"> <view class="kite-classify-cell"></view> <view class="kite-classify-cell"></view> <...
  • 多个商品想在一行横向滚动,于是想到小程序中的scroll-view,但是按照官网的教程代码粘贴使用了之后发现没有效果: <scroll-view class="scroll-view_H" scroll-x='true' style="width: 100%"> <view...
  • uni-app设置scroll-view 横向滚动

    千次阅读 2020-05-08 13:58:31
    scroll-view 可视区域滚动组件 竖向滚动好说 // 给scroll-view设置一个高度就可以 <scroll-view scroll-y="true"> <view class="item1"> </view> <view class="item2"> </view...
  • 一开始实现不了,搜的看了三四篇,并没...直接代码(展示五个,超过五个滚动,这写死了)(这主要是在scroll-view的下一级元素 view class=flex-wrap 动态赋值宽度): <scroll-view scroll-x="true" scroll-left="...
  • scroll-view横向滚动无效解决方案

    千次阅读 2020-05-01 21:46:07
    scroll-view横向滚动无效解决方案 .scrollContainer { width: 630rpx; height: 230rpx; line-height: 230rpx; white-space: nowrap; /* 必须设置*/ display: inline-block; /* 必须设置*/ } 关于scroll-view...
  • 这是最简单易懂的小程序页面内容横向滚动的方法之一,这里会用到小程序原生组件:srcoll-view,以及如何设置组件的属性和设置组件的css样式。 废话不多说,直接上代码。 // 这是设置小程序WXML页面 <scroll-view ...
  • 主要介绍了微信小程序scroll-view左侧导航栏点餐功能实现,点击种类,滚动到锚点;滚动到锚点,种类选中,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • scroll-view横向滚动无效

    千次阅读 2019-08-08 15:35:27
    可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度。...要容器可以横向滚动,属性设置scroll-x发现滚动不了,会被撑开高度换行 需要加上overflow:hidden;white-space:nowrap; ...
  • scroll-view的子元素要inline-block,父元素white-space: nowrap;就可以横向排列。
  • scroll-view横向滚动时,给scroll-view设置了display:flex,子元素宽度固定,并且总长度超出scroll-view的宽度,但是发现滚动不了,并且子元素宽度被压缩了。 解决方法: 给scroll-view设置white-space: ...
  • 微信小程序—scroll-view横向滚动的坑(父级设置flex子集无法一横排显示)
  • 关键属性: white-space: nowrap;...white-space:让滚动view横向摆放,不换行 box-sizing: 让滚动处在父布局内 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing demo: .wxss ...
  • 一句话,scroll-view的子元素要inline-block,父元素white-space: nowrap;就可以横向排列。但是这个时候,子元素有最后一个元素有可能是显示不全的,需要在scroll-view加上overflow: scroll;。就可以完美解决问题,...
  • 微信小程序 scroll-view横向滚动

    千次阅读 2019-03-06 10:40:16
    看到有人将scroll-top属性用在了scroll-x=true的scroll-view组件上...自己写了一个横向滚动scroll-view scroll-x=true的组件,但是死活不滚动(我顶你个肺啊) &lt;scroll-view scroll-x="true" st...
  • 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示; 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的; 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,527
精华内容 2,610
关键字:

scroll-view横向滚动