ltlzx
/
cnic_buyer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复HONLIST2

master
zhengshuiqi 4 years ago
parent
73d05773ff
commit
fb1577cf51
6 changed files with 192 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      App.vue
  2. 136
      components/swipers/swipers.vue
  3. 9
      pages.json
  4. 2
      pages/account/index.vue
  5. 3
      pages/category/index.vue
  6. 73
      pages/index/index.vue

1
App.vue
View File

@ -131,4 +131,5 @@
page{
overflow-x: hidden;
}
</style>

136
components/swipers/swipers.vue
View File

@ -0,0 +1,136 @@
<template>
<view>
<view class="top-swiper">
<view class="bg">
<view class="placeholder"></view>
<view class="image">
<image :src="swiper.list[swiper.index]" mode="aspectFill"></image>
</view>
</view>
<view class="box">
<view style="height: 44px;"></view>
<swiper class="swiper" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true" @change="swiperChange">
<swiper-item v-for="(item,index) in swiper.list" :key="index">
<image class='le-img' :src='item' :class="{'le-active':swiper.index == index}"></image>
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiper: {
margin: "150rpx",
index: 0,
list: [
"/static/images/douyin/0.jpg",
"/static/images/douyin/4.jpg",
"/static/images/douyin/7.jpg",
]
}
}
},
components: {
},
mounted() {
},
methods: {
//swiper滑动事件
swiperChange: function(e) {
this.swiper.index = e.detail.current;
},
}
}
</script>
<style lang="scss">
.top-swiper{
margin-bottom: 30rpx;
.bg{
padding-top: var(--status-bar-height);
box-sizing: content-box;
width: 100%;
position: relative;
.placeholder{
box-sizing: content-box;
padding-top: 600rpx;
height: 44px;
}
.image{
box-sizing: content-box;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
&::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
bottom: 0;
left: 0;
height: 65%;
background-image: linear-gradient(to bottom ,transparent, #FFF);
}
> image{
position: absolute;
box-sizing: content-box;
padding: 60px;
top: 0;
left: 0;
width: 100%;
height: 80%;
top: -60px;
left: -60px;
filter: blur(50px);
}
}
}
.box{
padding-top: var(--status-bar-height);
box-sizing: content-box;
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.swiper {
height: 600rpx;
margin: 0 20rpx;
.le-img {
width: 100%;
height: 100%;
display: block;
transform: scale(0.9);
transition: transform 0.3s ease-in-out 0s;
border-radius: 4px;
&.le-active {
transform: scale(1);
}
}
}
}
</style>

9
pages.json
View File

@ -367,6 +367,15 @@
}
}
,{
"path" : "components/swipers/swipers",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {

2
pages/account/index.vue
View File

@ -509,7 +509,7 @@
}
.account_info {
background-color: #000000 !important;
// background-color: #000000 !important;
border-bottom: 13.33rpx #F7F7F7 solid;
display: flex;

3
pages/category/index.vue
View File

@ -529,7 +529,8 @@
.good_item_img{
display: block;
background-color: #999999;
// background-color: #999999;
background-color: transparent;
width: 146.67rpx;
height: 146.67rpx;
margin-bottom: 22rpx;

73
pages/index/index.vue
View File

@ -349,6 +349,7 @@
handlechange(e) {
this.mycurrent = e.detail.current
},
change(e) {
this.index = e
let tarbar = this.tarbar
@ -615,7 +616,8 @@
console.log(item.zone_more_link)
const i = item.zone_more_link.indexOf('gid=')
// console.log(i)
const ids = item.zone_more_link.substring(i + 4, item.zone_more_link
const ids = item.zone_more_link.substring(i + 4, item
.zone_more_link
.length)
// console.log(ids)
// this.bestlist.push(item.blocks)
@ -1080,7 +1082,8 @@
success: (image) => {
// //////console.log(res.block_pic)
// 计算图片渲染高度
let showH = (50 * image.height) / image.width
let showH = (50 * image.height) / image
.width
// 判断左右盒子高度
if (that.leftH <= that.rightH) {
that.leftList.push(res)
@ -1417,43 +1420,37 @@
</view>
</view> -->
<!-- HOT SELLS 2 -->
<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
<!-- <scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"
:key="item1.block_id">
<view :class="['swiper-item',index1==mycurrent ? 'active' : '']">
<!-- class="item_img"> -->
<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
<image :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
@click="imgTo(item1)"></image>
</view>
</view>
<!-- 轮播图 -->
<!-- <view v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
<swiper v-for="(item1,index1) in item.blocks" :key="item1.block_id" style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent" :indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
<swiper-item v-for="i,index in 10" :key="i">
<view :class="['swiper-items',index==mycurrent ? 'active' : '']">
<image :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
@click="imgTo(itesm1)"></image>
<!-- <view> -->
<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
<!-- <swiper class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" style="height: 600rpx;"
previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
<!-- v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
<!-- v-for="i,index in 10" :key="i" -->
<!-- <view :class="['swiper-items',index==mycurrent ? 'active' : '']">
<img :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
@click="imgTo(item1)">
</view>
</scroll-view> -->
<!-- class="item_img"> -->
<!-- 测试1 -->
<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
<swiper style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
:indicator-dots="false" :circular="true" :interval="3000" :duration="1000">
<swiper-item v-for="item1,index1 in item.blocks" :key="item1.block_id">
<view :class="['swiper-items',index1==mycurrent ? 'active' : '']">
<image :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:'100%'}"
@click="imgTo(item1)"></image>
<!-- <image :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
@click="imgTo(itesm1)"></image> -->
</view>
</swiper-item>
</swiper>
</view> -->
<!-- </view> -->
</scroll-view>
<!-- 标题 -->
<!-- <view class="index_title page_padding">
@ -1469,6 +1466,7 @@
<view class="item_img "
:style="{width:(item.zone_code=='HONLIST3')?280+'rpx':'',height:item.zone_column +'rpx'}">
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
<a :href="item1.block_link"></a>
</view>
<view class="spike1_item_bottom">
<text>{{item1.block_title}}</text>
@ -1665,7 +1663,7 @@
// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
// width: 450rpx;
height: 85%;
height: 100%;
transform: scale(0.8);
transition: all 0.5s ease;
text-align: center;
@ -1675,9 +1673,21 @@
transform: scale(1);
}
.uni-swiper-dots {
display: none;
/deep/ .uni-swiper-dots {
display: none !important;
}
uni-swiper .uni-swiper-dots {
display: none !important;
z-index: -1 !important;
}
/deep/ .uni-swiper .uni-swiper-dots-horizontal {
display: none !important;
}
uni-swiper .uni-swiper-dot {
z-index: -1 !important;
display: none !important;
}
}
page {
@ -2640,4 +2650,5 @@
// width: 100%;
// }
// }
</style>

Write Preview
Loading…
Cancel
Save