uni-app scroll-view组件学习

上尽重城更上楼

已于 2024-08-01 23:50:56 修改

阅读量340

点赞数 8

文章标签： vue.js 学习前端

于 2024-07-30 22:17:31 首次发布

本文链接：https://blog.csdn.net/hfz1997/article/details/140808102

版权

定义：

可滚动视图区域。用于区域滚动。

属性（常用部分）

scroll-x：允许横向滚动
scroll-y：允许纵向滚动

代码示例：

竖向排列：

 <template>

<scroll-view scroll-y class=scrollView>
	<view>scro子元素</view>
	<view>scro子元素</view>
	<view>scro子元素</view>
	<view>scro子元素</view>
	
</scroll-view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		
		async onLoad(option) {
			//等待倒计时	
			await this.$onLaunched;
			console.log("等待倒计时结束后打印");
					
			// 后续业务逻辑
		},

		methods: {

		}
	}
</script>

<style lang="scss">
	.scorollView{
		width: 80%;
		height: 220px;
		border: 1px solid red;
		
		
	}
</style>


<template>

<scroll-view scroll-x class=scrollView>
	<viewclass="box">scroll子元素</view>
	<viewclass="box">scroll子元素</view>
	<viewclass="box">scroll子元素</view>
	
	
</scroll-view>

横向排列：

<template>
<scroll-view scroll-x class=scrollView>
    <viewclass="box">scroll子元素</view>
    <viewclass="box">scroll子元素</view>
    <viewclass="box">scroll子元素</view>
    
    
</scroll-view>
    
    
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        
        async onLoad(option) {
            //等待倒计时    
            await this.$onLaunched;
            console.log("等待倒计时结束后打印");
                    
            // 后续业务逻辑
        },

        methods: {

        }
    }
</script>

<style lang="scss">
    .scorollView{
        width: 80%;
        height: 220px;
        border: 1px solid red;
        white-space: nowrap;//不换行
    }
    
    .box{
        width: 100px;
        height: 100px;
        background: green;
        display: inline-block;//横向排列
        margin: 5px;
    }
    
</style>