uni-app首页

首页实现功能：

搜索框

轮播图

宫格组件。等。。。

<template>
	<view>
		<!-- 搜索框 -->
		<view>
			<u-search></u-search>
		</view>
		<!-- 轮播图 -->
		<view class="u-swiper">
			<swiper indicator-dots autoplay circular interval="3000">
				<swiper-item v-for="(item,index) in list" :key='item.id'>
					<image :src="'接口地址'+ item.advImg"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 全部服务 -->
		<view class="server">
			<!-- 宫格组件 -->
			<!-- col宫格的列数 -->
			<u-grid col="5">
				<u-grid-item v-if="index<=9" v-for="(item,index) in server" @click="goserver(index)">
					<image v-if="index<9" :src="'接口地址'+item.imgUrl"></image>
					<view v-if="index<9">{{item.serviceName}}</view>
					<view @click="more">
						<image v-if="index==9" src="../../static/uview/example/template_select.png"></image>
						<view v-if="index==9">更多</view>
					</view>
					
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 热门主题 -->
		<view class="hot">
			<view class="hot-item">热门主题</view>
			<view>
				<u-row>
				<!-- gutter间隔 -->
					<u-col class="u-hot" span="6" v-for="(item,index) in hotlist" >
						<image style="width: 100%; height: 400rpx; border-radius: 10rpx;" :src="'接口地址'+item.cover"></image>
						<view class="u-line-1">{{item.title}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 新闻专栏 -->
		<view class="newslist">
			<view>
				<!-- bar-width 滑块宽度 		item-width标签宽度-->
				<u-tabs :list="newsitem" bar-width="120" item-width="188" :current="currentSort" @change="changeSort"></u-tabs>
			</view>
			<view v-for="(item,index) in newslist" @click="newsdetail(item.id)">
				<image :src="'接口地址'+item.cover"></image>
				<view>{{item.title}}</view>
				<view class="news-title">
					<view>评论数：{{item.commentNum}}</view>
					<view>发布日期：{{item.publishDate}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

API接口进行了封装

 

<script>
	import api from "../../request/api.js"
    /* 导入api */
	export default {
		data() {
			return {
				list:[],
				server:[],
				hotlist:[],
				newsitem:[],
				newslist:[],
				currentSort:0,
				currentSort:0,
				goodsId:''
				
			}
		},
		onLoad() {
			//开屏广告
			/*uni.navigateTo({
				url:'./init'
			})*/
			
			this.getlunbo()
			this.getServer()
			this.gethot()
			this.getnewsitem()
			this.getnewsList()
			this.changeSort()
			
		},
		methods: {
			//跳转至服务详情
			goserver(index){
				/* 停车场 */
				if(index==0){
					uni.navigateTo({
						url:'../server/stop'
					})
				}
				/* 智慧巴士 */
				if(index==2){
					uni.navigateTo({
						url:'../server/bus'
					})
				}
				/* 生活缴费 */
				if(index==5){
					uni.navigateTo({
						url:'../server/life'
					})
				}
			},
			/* 更多 */
			more(){
				 uni.navigateTo({
				 	url:'../server/more'
				 })
			},
			
			//新闻详情
			newsdetail(id){
				uni.navigateTo({
					url:'../news/newsdetail?id='+id
				})
			},
			
			//新闻分类id
			changeSort(index){
				// console.log(index)
				this.currentSort = index
				this.getnewsList()
			},
			
			
			//获取轮播图
			async getlunbo(){
				const params={
					type:2
				}
				const res = await api.List(params)
				this.list = res.rows
				// console.log(res)
			},
			//全部服务
			async getServer(){
				const res1 = await api.Server()
				this.server = res1.rows
			},
			//热门主题
			async gethot(){
				const params={
					hot:"Y"
				}
				const res2 = await api.NewsList(params)
				this.hotlist = res2.rows
			},
			//新闻分类
			async getnewsitem(){
				const res3 = await api.Newsitem()
				// console.log(res3)
				this.newsitem = res3.data
			},
			//新闻列表
			async getnewsList(){
				if(this.currentSort==0)this.goodsId=9
				if(this.currentSort==1)this.goodsId=17
				if(this.currentSort==2)this.goodsId=19
				if(this.currentSort==3)this.goodsId=20
				if(this.currentSort==4)this.goodsId=21
				if(this.currentSort==5)this.goodsId=22
				const params={
					type:this.goodsId
				}
				const res4 = await api.NewsList(params)
				this.newslist = res4.rows
			}
		}
	}
</script>

这里用到了scss插件

<style lang="scss" scoped>
	.u-swiper{
		margin-top: 10rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.server{
		margin-top: 10rpx;
		// height: 200rpx;
		image{
			margin-bottom: 10rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}
	.hot{
		.hot-item{
			text-align: center;
			// margin: 25rpx;
		}
		.u-hot{
			image{
				width: 100%;
			}
			
		}
	}
	.newslist{
		image{
			width: 100%;
			height: 400rpx;
		}
		.new-title{
			display: flex;
			margin-top: 10rpx;
		}
	}
</style>

接口封装=> 首页测试