|
@@ -1,33 +1,36 @@
|
|
<template>
|
|
<template>
|
|
<view class="goods">
|
|
<view class="goods">
|
|
- <!-- 背景图 -->
|
|
|
|
- <view class="goods-img">
|
|
|
|
- <image style="width: 100%; height: 450rpx;" src="http://t9.9026.com/imgs/swiper01.png" mode=""></image>
|
|
|
|
- </view>
|
|
|
|
- <!-- 内容 -->
|
|
|
|
- <view class="main">
|
|
|
|
- <view class="search">
|
|
|
|
- <u-input placeholder="搜索" border='none'>
|
|
|
|
- <template slot="suffix" style='margin-right:40rpx;'>
|
|
|
|
- <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
|
|
|
|
- height="32rpx"></u-image>
|
|
|
|
- </template>
|
|
|
|
- </u-input>
|
|
|
|
|
|
+ <scroll-view class="scroll-y" @scroll="handleScroll" :scroll-into-view="topItem" scroll-with-animation
|
|
|
|
+ scroll-y="true">
|
|
|
|
+ <view id="top"></view>
|
|
|
|
+ <!-- 背景图 -->
|
|
|
|
+ <view class="goods-img">
|
|
|
|
+ <image style="width: 100%; height: 450rpx;" src="http://t9.9026.com/imgs/swiper01.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
- <view class="tab_nav">
|
|
|
|
- <view class="navTitle" v-for="(item,index) in items" :key="index">
|
|
|
|
- <view class="navTitle-item">
|
|
|
|
- <view :class="{'active':isActive === index}" @click="checked(index)">
|
|
|
|
- {{item.title}}
|
|
|
|
|
|
+ <!-- 内容 -->
|
|
|
|
+ <view class="main">
|
|
|
|
+ <view class="search">
|
|
|
|
+ <u-input placeholder="搜索" border='none'>
|
|
|
|
+ <template slot="suffix" style='margin-right:40rpx;'>
|
|
|
|
+ <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
|
|
|
|
+ height="32rpx"></u-image>
|
|
|
|
+ </template>
|
|
|
|
+ </u-input>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="tab_nav">
|
|
|
|
+ <view class="navTitle" v-for="(item,index) in items" :key="index">
|
|
|
|
+ <view class="navTitle-item">
|
|
|
|
+ <view :class="{'active':isActive === index}" @click="checked(index)">
|
|
|
|
+ {{item.title}}
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <view class="content">
|
|
|
|
- <scroll-view @scroll="handleScroll" :scroll-into-view="topItem" scroll-with-animation scroll-y="true">
|
|
|
|
|
|
+ <view class="content">
|
|
|
|
+
|
|
<view class="home-hotel-img-content">
|
|
<view class="home-hotel-img-content">
|
|
- <view id="top"></view>
|
|
|
|
|
|
+
|
|
<view class="home-hotel-img-content-item" v-for="item in goodsList"
|
|
<view class="home-hotel-img-content-item" v-for="item in goodsList"
|
|
:style="{marginTop:item.marginTop || 0 }">
|
|
:style="{marginTop:item.marginTop || 0 }">
|
|
<image class="home-hotel-img-content-item-img"
|
|
<image class="home-hotel-img-content-item-img"
|
|
@@ -38,33 +41,34 @@
|
|
<text class="text-main">{{item.title}}</text>
|
|
<text class="text-main">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="return-btn" v-if="isShow" @click="handleBackTop">
|
|
|
|
- <image style="width: 128rpx;height: 128rpx;" src="/static/icon/returntop.png" mode=""></image>
|
|
|
|
- </view>
|
|
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- </scroll-view>
|
|
|
|
|
|
+ <!-- 触底 -->
|
|
|
|
+ <view class="home-bottom">
|
|
|
|
+ <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
|
|
- <!-- <text @click="goGoodsDetail">商品</text>
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <!-- <text @click="goGoodsDetail">商品</text>
|
|
<text @click="goGoodsDetailImg">转盘</text> -->
|
|
<text @click="goGoodsDetailImg">转盘</text> -->
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ <view class="return-btn" v-if="isShow" @click="handleBackTop">
|
|
|
|
+ <image style="width: 128rpx;height: 128rpx;" src="/static/icon/returntop.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
- <!-- 触底 -->
|
|
|
|
- <view class="home-bottom">
|
|
|
|
- <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-
|
|
|
|
export default {
|
|
export default {
|
|
|
|
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
// 返回的按钮是否显示
|
|
// 返回的按钮是否显示
|
|
- isShow: true,
|
|
|
|
- topItem: '' ,//返回顶部的标记点
|
|
|
|
|
|
+ isShow: false,
|
|
|
|
+ topItem: '', //返回顶部的标记点
|
|
goodsList: [{
|
|
goodsList: [{
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
@@ -86,7 +90,7 @@
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
title: '环球洲际',
|
|
title: '环球洲际',
|
|
short: '',
|
|
short: '',
|
|
- },{
|
|
|
|
|
|
+ }, {
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
title: '环球洲际',
|
|
title: '环球洲际',
|
|
@@ -107,7 +111,7 @@
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
title: '环球洲际',
|
|
title: '环球洲际',
|
|
short: '',
|
|
short: '',
|
|
- },{
|
|
|
|
|
|
+ }, {
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
title: '环球洲际',
|
|
title: '环球洲际',
|
|
@@ -128,7 +132,7 @@
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
title: '环球洲际',
|
|
title: '环球洲际',
|
|
short: '',
|
|
short: '',
|
|
- },{
|
|
|
|
|
|
+ }, {
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
img: 'http://t9.9026.com/imgs/goodsimg01.png',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
|
|
title: '环球洲际',
|
|
title: '环球洲际',
|
|
@@ -185,31 +189,30 @@
|
|
// this.shortLong()
|
|
// this.shortLong()
|
|
// console.log(this)
|
|
// console.log(this)
|
|
// },
|
|
// },
|
|
- onLoad(){
|
|
|
|
|
|
+ onLoad() {
|
|
this.shortLong()
|
|
this.shortLong()
|
|
this.getGoodsList()
|
|
this.getGoodsList()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
-
|
|
|
|
- getGoodsList(){
|
|
|
|
|
|
+
|
|
|
|
+ getGoodsList() {
|
|
this.$api.product.getProducts({
|
|
this.$api.product.getProducts({
|
|
- type:1,
|
|
|
|
|
|
+ type: 1,
|
|
page: 0
|
|
page: 0
|
|
}).then(res => {
|
|
}).then(res => {
|
|
console.log(res);
|
|
console.log(res);
|
|
})
|
|
})
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+
|
|
handleScroll(e) {
|
|
handleScroll(e) {
|
|
- console.log(111);
|
|
|
|
//只有scrollTop有用,先拿scrollTop
|
|
//只有scrollTop有用,先拿scrollTop
|
|
let {
|
|
let {
|
|
scrollTop
|
|
scrollTop
|
|
} = e.detail
|
|
} = e.detail
|
|
-
|
|
|
|
|
|
+
|
|
console.log(scrollTop);
|
|
console.log(scrollTop);
|
|
//滑动大于500让按钮显示
|
|
//滑动大于500让按钮显示
|
|
- this.isShow = scrollTop > 200
|
|
|
|
|
|
+ this.isShow = scrollTop > 500
|
|
//因为点第二次不行,这里记得重置清空一下
|
|
//因为点第二次不行,这里记得重置清空一下
|
|
this.topItem = ''
|
|
this.topItem = ''
|
|
},
|
|
},
|
|
@@ -296,6 +299,13 @@
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
|
|
+ .scroll-y {
|
|
|
|
+ height: 100vh;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
.content {
|
|
.content {
|
|
background-color: #FFF;
|
|
background-color: #FFF;
|
|
padding: 20rpx 30rpx;
|
|
padding: 20rpx 30rpx;
|
|
@@ -348,15 +358,14 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- .return-btn {
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+.return-btn {
|
|
position: fixed;
|
|
position: fixed;
|
|
bottom: 140rpx;
|
|
bottom: 140rpx;
|
|
right: 14rpx;
|
|
right: 14rpx;
|
|
|
|
|
|
}
|
|
}
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|