首页实现功能:
搜索框
轮播图
宫格组件。等。。。
<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>