示例:搜索框使用search组件,之前封装过
代码:
<template>
<view class="content" :style="{ height: pageHeight, overflow: 'hidden' }">
<view class="search">
<!-- <input class="searchbox" placeholder="请输入搜索关键词" /> -->
<search @search="disableScroll" />
</view>
<!-- 轮播图 -->
<view class="imgbox">
<swiper indicator-dots class="imgitem">
<navigator
url="https://www.baidu.com/"
v-for="(item, index) in imgList"
:key="index"
>
<swiper-item>
<image :src="item.image_src"></image> </swiper-item
></navigator>
</swiper>
</view>
<!-- 分类 -->
<view class="cate">
<ul class="libox">
<li v-for="(item, index) in cateList" :key="index">
<image :src="item.image_src"></image>
</li>
</ul>
</view>
<!-- 时尚女装 -->
<view id="top" v-for="(item, index) in mainList" :key="index">
<view class="girl"
><image :src="item.floor_title.image_src"></image
></view>
<view class="banner_one">
<view class="left"
><image :src="item.product_list[0].image_src"></image
></view>
<view class="right1"
><image :src="item.product_list[1].image_src"></image
></view>
<view class="right2"
><image :src="item.product_list[2].image_src"></image
></view>
<view class="right3"
><image :src="item.product_list[3].image_src"></image
></view>
<view class="right4"
><image :src="item.product_list[4].image_src"></image
></view>
</view>
</view>
<view
v-if="scrollTop > 0"
@click="goTop"
class="goTop iconfont icon-huidingbu"
>
</view>
</view>
</template>
<script>
import search from '../../components/search'
export default {
data() {
return {
pageHeight: 'auto',
imgList: [],
cateList: [],
mainList: [],
scrollTop: 0,
}
},
onLoad() {},
created() {
// 进来发请求获取轮播图
this.getimgArr()
// 进来发请求获取分类
this.getCate()
// 进来发请求获取楼层;
this.getMain()
},
methods: {
disableScroll(e) {
// console.log(e)
this.pageHeight = e.pageHeight
},
// 获取轮播图
async getimgArr() {
const res = await this.http({
url: '/api/public/v1/home/swiperdata',
method: 'get',
})
console.log(res[1].data.message, 1111)
this.imgList = res[1].data.message
},
// 获取分类
async getCate() {
const res = await uni.request({
url: 'https://www.uinav.com/api/public/v1/home/catitems',
})
console.log(res[1].data.message)
this.cateList = res[1].data.message
},
// 获取楼层
async getMain() {
const res = await this.http({
url: '/api/public/v1/home/floordata',
})
console.log(res[1].data.message)
this.mainList = res[1].data.message
},
async onPullDownRefresh() {
console.log('下拉了')
await this.getimgArr()
await this.getCate()
await this.getMain()
//终止下拉动画效果
uni.stopPullDownRefresh()
},
// 监听页面滚动
onPageScroll(e) {
this.scrollTop = e.scrollTop
},
// 回到顶部
goTop() {
uni.pageScrollTo({ scrollTop: 0 })
},
},
components: { search },
}
</script>
<style lang="less" scoped>
.goTop {
position: fixed;
right: 5px;
bottom: 30px;
z-index: 3;
font-size: 30px;
}
#top {
height: 280px;
width: 100%;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.banner_one {
width: 100%;
height: 180px;
background-color: #fffffc;
position: relative;
image {
width: 100%;
height: 100%;
}
.left {
width: 100px;
height: 100%;
background: chocolate;
}
.right1 {
position: absolute;
left: 110px;
top: 0px;
width: 140px;
height: 49%;
background: cornflowerblue;
}
.right2 {
position: absolute;
right: 0px;
top: 0px;
width: 120px;
height: 49%;
background: fuchsia;
}
.right3 {
position: absolute;
bottom: 0px;
left: 110px;
width: 120px;
height: 49%;
background: yellow;
}
.right4 {
position: absolute;
bottom: 0px;
right: 0;
width: 140px;
height: 49%;
background: red;
}
}
.girl {
width: 100%;
height: 50px;
background-color: #f4f4f4;
image {
width: 100%;
height: 80%;
margin-top: 10px;
}
}
.cate {
width: 100%;
.libox {
width: 100%;
background-color: #ffffff;
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
height: 110px;
li {
display: flex;
flex-direction: column;
image {
width: 50px;
height: 50px;
}
}
}
}
.imgbox {
width: 100%;
height: 300rpx;
background-color: aqua;
.imgitem {
width: 100%;
height: 300rpx;
image {
width: 100%;
height: 300rpx;
}
}
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin: 200rpx auto 50rpx auto;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>