scroll-view组件
使用方法
代码
<scroll-view class="scroll" scroll-x="true">
<view class="group">
<view class="item">111</view>
<view class="item">111</view>
<view class="item">111</view>
<view class="item">111</view>
<view class="item">111</view>
</view>
</scroll-view>
样式
.scroll {
border: 1px solid pink;
box-sizing: border-box;
height: 220rpx;
.group {
white-space: nowrap;
.item {
width: 200rpx;
height: 220rpx;
background-color: orange;
display: inline-block;
}
}
}
注解:三级盒子模型 最外层定义宽/高;中间使用white-space:nowrap 使最内层盒子不换行;最内层盒子定义宽高,注意要使用display:inline-block 使块级元素变为行内块级元素。
效果![滚动条在不同的浏览器上的显示效果不一样](https://i-blog.csdnimg.cn/blog_migrate/5164850ea823c2f94a7ab0af3413525c.png#pic_center)
swiper组件
使用方法
代码
<swiper class="swiper" autoplay="true" interval="3000" circular="true" duration="200">
<swiper-item class="item">
<image src="/static/images/pic1.jpg" mode="aspectFill"></image>
</swiper-item>
<swiper-item class="item">
<image src="/static/images/pic2.jpg" mode="aspectFill"></image>
</swiper-item>
<swiper-item class="item">
<image src="/static/images/pic3.jpg" mode="aspectFill"></image>
</swiper-item>
</swiper>
注解:mode属性下的aspectFill是适应短边,长边按比例自动缩放;aspectFit是适应长边
样式
.swiper {
.item{
image{
width: 100%;
height: 400rpx;
}
}
}