uni-app02

今天主要完成首页的开发

1.首页搜索框的配置

"style": {
				 "app-plus":{
					 "scrollIndicator":"none",//隐藏滚动条
					 "bounce":"none",//关闭反弹效果
					 "titleNView":{
						 // 搜索框配置
						 "searchInput":{
							 "align":"left",
							 "backgroundColor":"#F7F7F7",
							 "borderRadius":"4px",
							 "placeholder":"智能积木 越野四驱车",
							 "placeholderColor":"#CCCCCC",
							 "disabled":true
						 },
						 //配置按钮
						 "buttons":[
							 // 左边
							 {
								 "color":"#999999",
								 "colorPressed":"#BBBBBB",
								 "float":"left",
								 "fontSize":"22px",
								 "fontSrc":"/static/font/iconfont.ttf",
								 "text":"\ue67a"
							 },
							 // 右边
							 {
								 "color":"#999999",								 
								 "colorPressed":"#BBBBBB",
								 "float":"right",
								 "fontSize":"22px",
								 "fontSrc":"/static/font/iconfont.ttf",
								 "text":"\ue661"
							 }
						 ]
					 }
				 }
			}

2.轮播图组件的编写

    <view>
		<swiper indicator-dots autoplay circular 
		:interval="3000" :duration="1000" >
			<block v-for="(item,index) in resdata" :key="index">
				<swiper-item style="height: 350rpx;">
					<view class="swiper-item" @tap="event(item)">
						<image 
						:src="item.src" 
						mode="widthFix"></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>

3.首页分类图标组件

    <view class="row j-center py-3">
		<block v-for="(item,index) in resdata" :key="index">
			<view class="span-4 d-flex flex-column a-center py-1" 
			@tap="open(item)">
				<image style="width: 60rpx;height: 60rpx;" 
				:src="item.src"></image>
				<text class="font-sm text-muted">{{item.text}}</text>
			</view>
		</block>
	</view>

4.全局分割线组件

<view style="height: 18rpx;background-color: #F5F5F5;"></view>

main.js进行全局注册

5.广告图位组件

    <view class="d-flex">
		<view>
			<image style="height: 530rpx;width: 373rpx;border-right: 2rpx solid #F5F5F5;"
			:src="resdata.big.src"></image>
		</view>
		<view>
			<image style="height: 264rpx;width: 375rpx;border-bottom: 2rpx solid #F5F5F5;"
			:src="resdata.smalltop.src"
			mode="widthFix"></image>
			<image style="height: 264rpx;width: 375rpx;"
			:src="resdata.smallbottom.src"
			mode="widthFix"></image>
		</view>
	</view>