文章目录
第三天
实现上拉加载更多
给分页一个初始值
-
通过onReachBottom来监听触底
onReachBottom () { this.pageindex++ this.getGoods() } -
重新给goods赋值
// 获取推荐商品
async getGoods() {
const res = await this.$myRuquest({
url: '/api/getgoods?pageindex='+this.pageindex
})
this.goods = [...this.goods,...res.data.message]
},
-
动态显示底线
-
定义flag
-
通过onReachBottom监听是否还有更多
if(this.pageindex*10>this.goods.length) return this.flag = true -
通过v-if控制底线
<view class="over_line" v-if="flag">----------我是有底线的----------</view>
-
实现下拉刷新
-
通过onPullDownRefresh进行下拉刷新的操作
onPullDownRefresh() { this.goods = [] this.pageindex = 1 this.flag = false setTimeout(()=>{ this.getGoods(()=>{ uni.stopPullDownRefresh() }) },1000) }
<template>
<view class="home">
<swiper indicator-dots circular autoplay="true">
<swiper-item v-for="item in swipers" :key="item.id">
<image :src="item.img"></image>
</swiper-item>
</swiper>
<!-- 导航部分-->
<view class="nav">
<view class="item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
<view :class="item.icons"></view>
<text>{
{item.title}}</text>
</view>
</view>
<view class="hot_goods">
<view class="tit">推荐商品</view>
<!-- 使用组件写法：将数据传递到组件内部 -->
<goods-list :goods="goods"></goods-list>
</view>
<view class="over_line" v-if="flag">----------我是有底线的----------</view>
</view>
</template>
<script>
import goodsList from "../../components/good/goods-list.vue"
export default {
data() {
return {
pageindex: 1, //默认分页下标
flag: false, //监听是否还有更多
swipers: [],
title: 'Hello',
goods: [], //推荐商品
//导航
navs: [{
icons: "iconfont icon-ziyuan",
title: "黑马超市",
path: "/pages/goods/goods"
},
{
icons: "iconfont icon-tupian",
title: "社区图片",
path: "/pages/pics/pics"
},
{
icons: "iconfont icon-guanyuwomen",
title: "联系我们",
path: "/pages/contact/contact"
},
{
icons: "iconfont icon-shipin",
title: "学习视频",
path: "/pages/videos/videos"
}
]
}
},
onLoad() {
this.getSwipers()
this.getGoods()
},
//上拉加载更多
onReachBottom() {
console.log("this.goods.length" + this.goods.length)
if (this.pageindex * 10 > this.goods.length) return this.flag = true
this.pageindex++
this.getGoods()
console.log("=触底了。。。。。==" + this.pageindex)
},
//下拉刷新
onPullDownRefresh() {
this.goods = []
this.pageindex = 1
this.flag = false
setTimeout(() => {
this.getGoods(() => {
uni.stopPullDownRefresh()
})
}, 1000)
},
components: {
"goods-list": goodsList
},
methods: {
//获得轮播图的数据
async getSwipers() {
const res = await this.$myRuquest({
method: 'GET',
url: '/api/getlunbo'
})
this.swipers = res.data.message;
},
// 获取推荐商品
async getGoods(callBack) {
const res = await this.$myRuquest({
url: '/api/getgoods?pageindex=' + this.pageindex
})
this.goods = [...this.goods, ...res.data.message]
callBack && callBack();
},
//点击导航跳转处理
navItemClick(url) {
uni.reLaunch({
url
})
console.log(url)
},
},
}
</script>
<style lang="scss">
.hot_goods {
background: #eee;
.tit {
border-top: 2px solid #eee;
border-bottom: 2px solid #eee;
margin-top: 20px;
margin-bottom: 3px;
color: #000000;
height: 50px;
line-height: 50px;
text-align: center;
letter-spacing: 20px;
background: #fff;
}
}
.nav {
display: flex;
align-items: center;
.item {
width: 25%;
text-align: center;
view {
background: #000000;
line-height: 120rpx;
width: 120rpx;
height: 120rpx;
border-radius: 90px;
margin: 10px auto;
}
text {
font-size: 15px;
}
}
.iconfont {
font-size: 25px;
color: #fff;
height: 50px;
}
.icon-tupian {
font-size: 20px;
}
}
@font-face {
font-family: "iconfont";
src: url('~@/static/fonts/iconfont.eot?t=1576335469449');
/* IE9 */
src: url('~@/static/fonts/iconfont.eot?t=1576335469449#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVMAAsAAAAAChwAAAT/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqHQIYhATYCJAMUCwwABCAFhG0HUBurCFGUTk6f7EeBu6eIlFFajBY208XLlGHx/6/hiYfvx76d+2xFJLlUn75pp4tCoyQ8NgiJUJjuJfzNpSrpXIDoeDbs3GjyH7Lfv+zTy1mok+GyEhYAW8AKaPvz/6eeG1QvDUo6SQW8bE4KYTDSMRj1R/5x7/TP88Dmo7Jc/misYXOelwWYYEBjbGxrAQ7KEvQW8SwuJBO4nkCvRQ21q/PbB5hXQLdAvDU6gHmbRQnhhG598xlb1lEvsu70PvEBfFU/H/+hF1IkNYO+149nMRz+6v7/fwrv4JAqI6T5uXCbRMYWUIhnX8+tKT22ZUrvJ3PaCdCNryR+Sb2RfRPT+c9kbdF0s788siIRDWj6GXkWL/ySEsVkfsmyftoYKiIZsiQfJ+Y2ll7MgdgDiE/AMF+CumLWsCSpdFXpjsNkefoatW8WSY8xapRhreWm1a9vWvVEM6edaQdPapImTzTLLG4BwEBG/HJsK4bVEKkStJbxbUYy3othvO2ofJA7jBARcUZ4illDuEL29TB2C/3AGWj4WUfGYbG25LTICaEk1jWBR8KWC0bqQJ+EjJYmOnvisiHzqtifvZ08X7NYzBaJWAJBglDIRIi3Fd/C3cbZjqEKvkh9Qmx2SKCgMAhD15VHVkCQMCWOP72YnLB0euHUpROzJ/PEYiR6wxK8ShC+ZsryVibGlbIzorOjqRKnhwyOKTIlMRoPSLgMlYvInDIKdwsQ8K2YbO2PReRsyxzZvrK0dWxUYUrIE2sPj8+sHNw6tUVhj0AgslvelUfhDnNG4k0YwgedbyX/ovPRL8SnqwOt/atMII/RGGMacyXGJOaq+MtGYDFMOL1Hk8OSJdfqARNMZkPmnDVh5DP0bjDpx6XAB6RO0JkqM4F0fNSNZMKXB20QqI//n+swdzCvnv1/JszOzMEszPsskD8RZtrarNB14gGhubjWlduokVnWD9e9PyCQd1jtvPjStKTGs6VZFT/xjhhW0hpkG6PoC0wW8iGUrPK9prFY4AM+9GF8APhKfIvr5tct+IoAxU/eE3ILa4yrDxTgUfkrG0lPTtshU4pGtXT9UJqywWkDhzyi/5ka15D+WlPn1Gd+QYF7s0j3dXTuS0oStZLum6on86NOwIbPcydIP3+STiDFaYk1Z6WFLPt7b7M6EhMA+Gr+qtDilfia4mPFr0p8JZUS973QHulzYJxsPjJ6xdeW7Wd75WHHrZsGDXaUb1hacCuQVmrOkt1DjdgTxSeY3EcWDqCzRLxB9PmH2DNplYhzhCDbNLfzY7dKy1jb/dqNFfBTXbWg8vhWsH1JP9IN0VQmIcif4isHay1vtVDzNIiyxeirbpZ0JKEXg3QAAqN+8jFMLN9E6DZhQtJlAbJuS2ght6DqcwRNt1Potelicp8xbEqUHmz4IBCGfUIy6DtkwyZoIb+hmvQLzXAQoddNbM3ZZyWKFk+YAqEYwxGayJZKsMuiVnxH2ucBW+Uq94m4MkHstjrO5AWVxHkMqPq6J6JQsS3wnGxGeW7RsU0pklYi4rbbbeV3plZkC1h0iZGAIDEUGkFGxCopubpYdL3/DtG8XIBDSn4knxBWMbWjrpZODPRCU8YqWZfGlT6tRwjFOynMKqBz6iI5xizk/FulSES0JCkizrY2q6Tialrl64ppLD0VysKcNVLkKFGjae8S40w5K14OB+WS9lKjkR/YgsrZsRnZzAAA') format('woff2'),
url('~@/static/fonts/iconfont.woff?t=1576335469449') format('woff'),
url('~@/static/fonts/iconfont.ttf?t=1576335469449') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('~@/static/fonts/iconfont.svg?t=1576335469449#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shipin:before {
content: "\f0024";
}
.icon-tupian:before {
content: "\e650";
}
.icon-guanyuwomen:before {
content: "\e608";
}
.icon-ziyuan:before {
content: "\e60d";
}
.home {
swiper {
width: 750rpx;
height: 380rpx;
image {
width: 100%;
height: 100%;
}
}
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
关于我们
实现社区图片
实现资讯列表
实现列表项的结构和样式
代码
<template>
<view class="pics">
<scroll-view class="left" scroll-y>
<view class="active">家居生活</view>
<view>家居生活</view>
<view>家居生活</view>
<view>家居生活</view>
<view>家居生活</view>
<view>家居生活</view>
<view>家居生活</view>
<view>家居生活</view>
<view>家居生活</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
page {
height: 100%;
}
.pics {
height: 100%;
.left {
width: 100px;
height: 100%;
border-right: 1px solid #eee;
view {
height: 60px;
line-height: 60px;
color: #333;
text-align: center;
font-size: 30rpx;
border-top: 1px solid #EEEEEE;
}
.active {
background-color: #B50E03;
color: #FFFFFF;
}
}
}
</style>
效果
准备后台调用方法
<template>
<view class="pics">
<scroll-view class="left" scroll-y>
<view class="active" v-for="item in cates" :key="item.id">{
{item.title}}</view>
</scroll-view>
</view>
</template>
methods: {
async getPicsCate() {
const res = await this.$myRuquest({
url: '/api/getimgcategory'
})
console.log(res)
this.cates = res.data.message
}
},
onLoad() {
this.getPicsCate()
}
完成默认选择第一条
<template>
<view class="pics">
<scroll-view class="left" scroll-y>
<view :class="active" v-for="item in cates" :key="item.id">{
{item.title}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
cates: [],
active:0
}
},
onLoad() {
this.getPicsCate();
},
methods: {
async getPicsCate() {
const res = await this.$myRuquest({
url: '/api/getimgcategory'
})
console.log(res)
this.cates = res.data.message
}
}
}
</script>
<style lang="scss">
page {
height: 100%;
}
.pics {
height: 100%;
.left {
width: 100px;
height: 100%;
border-right: 1px solid #eee;
view {
height: 60px;
line-height: 60px;
color: #333;
text-align: center;
font-size: 30rpx;
border-top: 1px solid #EEEEEE;
}
.active {
background-color: #B50E03;
color: #FFFFFF;
}
}
}
</style>
重新改造
methods: {
//左侧菜单选中效果
leftClickHandle(index){
this.active=index;
}
}
<view @click="leftClickHandle(index)" class="active===index?'active':''" v-for="(item,index) in cates" :key="item.id">{
{item.title}}</view>
第四天
完成目标
43-实现右侧数据的渲染
44-完成图片的预览功能
45-实现资讯列表的结构和数据的获取.avi
右侧数据的渲染
目标：
测试得到选中的item.id
调用方法
定义集合来接收
定义view来占用调整样式，
<scroll-view class="right" scroll-y="">
<view class="item">
<image src="http://demo.dtcms.net/upload/201504/18/thumb_201504181230434303.jpg"></image>
<text>
不要简朴不要素雅洋气卧室我做主，高低床榻榻米式靓丽卧室装扮，现代油画壁画帆布画卧室餐厅仟象映画，现代中式卧室装修图欣赏，温馨浪漫，而且很时尚的卧室设计，欧式卧室飘窗装修效果图。
</text>
</view>
</scroll-view>
需要在style加上: display: flex;
这里就需要调整样式
.right{
height: 100%;
width: 520rpx;
margin: 10rpx auto;
.item{
image{
width: 520rpx;
height: 520rpx;
border-radius: 5px;
}
text{
font-size: 30rpx;
line-height: 60rpx;
}
}
}
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
