uni-app基础学习

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 使块级元素变为行内块级元素。

效果

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;
			}
		}
	}

注解：要为image设置宽高