1.view
view类似于传统HTML的div,用于包裹各种元素
如果使用nvue,则需注意,包裹文字应该使用<text>
组件。
属性说明:
hover-class:默认值是none,按下去时的样式类,当 hover-class="none" 时,没有点击态效果
代码示例:
<template>
<view class="box" hover-class="HoverBox">1111</view>
</template>
<script>
</script>
<style>
.box{
width: 100px;
height: 50px;
background: green;
}
.HoverBox{
background: red;
}
</style>
hover-stop-propagation:默认值是false,用来阻止祖先节点出现点击时的样式
hover-start-time:点击后多少毫秒显示样式类
hover-stay-time:鼠标松开后多少毫秒消失样式
代码示例:
<template>
<view class="box" hover-class="HoverBox" hover-stop-propagation hover-start-time="1000" hover-stay-time="2000">2222</view>
</template>
<script>
</script>
<style>
.box{
width: 100px;
height: 50px;
background: green;
}
.HoverBox{
background: red;
}
</style>
2.scroll-view:
可滚动视图区域。用于区域滚动。
注意:在webview渲染的页面中,区域滚动的性能不及页面滚动。
属性:
scroll-x:也许横向滚动
scroll-y:允许纵向滚动
scroll-top:设置纵向滚动条位置
scroll-left:设置横向滚动条位置
代码示例:
<template>
<!-- 纵向滚动条 -->
<scroll-view class="View_y" scroll-y>
<view class="box_y">詹家伟1111</view>
<view class="box_y">詹家伟2222</view>
<view class="box_y">詹家伟3333</view>
<view class="box_y">詹家伟4444</view>
<view class="box_y">詹家伟5555</view>
</scroll-view>
<view>-------------------分割线----------------------------
------------------------------------------------------</view>
<!-- 横向滚动条 -->
<scroll-view class="View_x" scroll-x>
<view class="box_x">詹家伟1111</view>
<view class="box_x">詹家伟2222</view>
<view class="box_x">詹家伟3333</view>
<view class="box_x">詹家伟4444</view>
<view class="box_x">詹家伟5555</view>
</scroll-view>
</template>
<script>
</script>
<style>
.View_y{
font-size: 50px;
margin: auto;
width: 300px;
height: 200px;
border: 1px solid red;
}
.View_x{
font-size: 50px;
margin: auto;
width: 300px;
height: 100px;
border: 1px solid red;
white-space: nowrap; /* 不自动换行 */
}
.box_x{
width: 300px;
display: inline-block; /* 把子元素设置成行内块级元素 */
}
</style>
使用竖向滚动时,需要给 <scroll-view>
一个固定高度。
使用横向滚动时,需要给<scroll-view>
添加white-space: nowrap
样式,display: inline-block把子元素设置成行内块级元素。