定义:
可滚动视图区域。用于区域滚动。
属性(常用部分)
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>