轮播修改

master
chen 2021-11-17 10:22:19 +08:00
parent 4978f9ed95
commit 19856feb31
5 changed files with 89 additions and 76 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<view> <view>
<view v-if="isDot" class="banner-box"> <view v-if="isDot" class="banner-box">
<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight+'px'}" :autoplay="true" :circular="true" :interval="3000" :duration="500"> <swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight+'px'}" :isplay="autoplay" :circular="true" :interval="3000" :duration="500">
<swiper-item v-for="(item,index) in bannerList" :key="index"> <swiper-item v-for="(item,index) in bannerList" :key="index">
<view @tap="chooseImg(index)" class="posir"> <view @tap="chooseImg(index)" class="posir">
<image :style="{borderRadius:newRadius+'px',height:newHeight+'px'}" class="img" :src="item.imgSrc" mode="aspectFill"></image> <image :style="{borderRadius:newRadius+'px',height:newHeight+'px'}" class="img" :src="item.imgSrc" mode="aspectFill"></image>
@ -21,6 +21,10 @@
export default { export default {
name:"swiper-pu", name:"swiper-pu",
props:{ props:{
isplay:{
type:Boolean,
default:false
},
isDot:{// isDot:{//
type:Boolean, type:Boolean,
default:true default:true

View File

@ -17,7 +17,7 @@
<!-- 热门推荐 --> <!-- 热门推荐 -->
<template v-if="ccurrent==0"> <template v-if="ccurrent==0">
<!-- 自定义轮播 --> <!-- 自定义轮播 -->
<swiper-pu :bannerList="bannerList" :newHeight="'154'" :newRadius="'10'" :newBottom="'10'"></swiper-pu> <swiper-pu :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'154'" :newRadius="'10'" :newBottom="'10'"></swiper-pu>
<!-- 自定义二级分类 --> <!-- 自定义二级分类 -->
<view class="mar-x20 mar-s40"> <view class="mar-x20 mar-s40">
<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" @choosecateEv="chooseTwo" :newcateList="cateListTwo"></cate-pu> <cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" @choosecateEv="chooseTwo" :newcateList="cateListTwo"></cate-pu>
@ -85,6 +85,7 @@
bannerList:[], bannerList:[],
titleList:[], titleList:[],
imgList:[], imgList:[],
isAutoPlay:false
} }
}, },
onPageScroll(e) { onPageScroll(e) {
@ -99,6 +100,12 @@
this.isZanw = false this.isZanw = false
} }
}, },
onHide() {
this.isAutoPlay = false;
},
onUnload() {
this.isAutoPlay = false;
},
onLoad() { onLoad() {
this.checkBZ()// this.checkBZ()//
let maiOjb = { let maiOjb = {
@ -114,6 +121,7 @@
this.$toolAll.tools.isLogin() this.$toolAll.tools.isLogin()
// console.log(this.category_id); // console.log(this.category_id);
if(this.category_id!='') this.checkCate(this.category_id)// if(this.category_id!='') this.checkCate(this.category_id)//
this.isAutoPlay = true;
}, },
methods: { methods: {
checkSwi(){ checkSwi(){

View File

@ -25,21 +25,7 @@
<view class="pad-x180"> <view class="pad-x180">
<!-- 自定义轮播 --> <!-- 自定义轮播 -->
<view :style="{marginTop: (statusHNH+60)+'px'}"> <view :style="{marginTop: (statusHNH+60)+'px'}">
<!-- <swiper-pu :bannerList="bannerList"></swiper-pu> --> <swiper-pu :bannerList="bannerList" :isplay="isAutoPlay"></swiper-pu>
<view class="banner-box">
<swiper :current="bcurrent" @change="changeBanner" :style="{height: 200+'px'}" :autoplay="isAutoPlay" :circular="true" :interval="3000" :duration="500">
<swiper-item v-for="(item,index) in bannerList" :key="index">
<view @tap="chooseImg(index)" class="posir">
<image :style="{borderRadius:0+'px',height:200+'px'}" class="img" :src="item.imgSrc" mode="aspectFill"></image>
<image @tap.stop="playVideo(index)" v-if="item.isVideo" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
</view>
</swiper-item>
</swiper>
<!-- 指示点 -->
<view class="dot-box" :style="{bottom:18+'px'}">
<view :class="bcurrent==indexd ? 'dotActive' : 'dotMo'" v-for="(itemd,indexd) in bannerList.length" :key="indexd"></view>
</view>
</view>
</view> </view>
<!-- 宫格 --> <!-- 宫格 -->
<view v-if="gonggList.length>1" class="mar-zy30 bacf radius10 pad-s25 mar-s10 disac fw"> <view v-if="gonggList.length>1" class="mar-zy30 bacf radius10 pad-s25 mar-s10 disac fw">
@ -147,7 +133,6 @@
jieDuan:false, jieDuan:false,
isNewRenderDone:false ,// isNewRenderDone:false ,//
isQuan:true, isQuan:true,
bcurrent:0,
isAutoPlay:false isAutoPlay:false
} }
}, },
@ -166,6 +151,9 @@
onHide() { onHide() {
this.isAutoPlay = false; this.isAutoPlay = false;
}, },
onUnload() {
this.isAutoPlay = false;
},
onShow() { onShow() {
log('输出的解构') log('输出的解构')
this.checkNet() this.checkNet()
@ -183,47 +171,55 @@
this.checkKT()// this.checkKT()//
this.isAutoPlay = true; this.isAutoPlay = true;
}, },
onShareAppMessage(res) {}, onShareAppMessage(res) {
var ya = this;
let maiOjb = {
e:6,//
c:this.detailObj.id*1,
t:new Date().getTime()//
}
this.$toolAll.tools.maiDian(maiOjb)
var shareObj = {
     title: '成都恒美毛发', // (slogan)
     path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` // 默认是当前页面,必须是以‘/开头的完整路径
  };
  return shareObj;
},
onLoad(options) { onLoad(options) {
// if (options.invite_code!=undefined) {
// setTimeout(()=>{ uni.login({
// // this.list = list; provider: 'weixin',
// this.$refs.wfalls.init(); success: (res)=> {
// },1000) var params = {
if (options && options.q) { code:res.code,
let arr = decodeURIComponent(options.q).split('?')[1].split('&') invite_code:options.invite_code,//
let obj = {} }
arr.forEach(item => { this.$requst.post('user/login',params).then(res => {console.log('调用成功');},error => {})
let brr = item.split('=') },
obj[brr[0]] = brr[1] });
}) }
console.log(obj); console.log(options.invite_code);
uni.login({ if(options.invite_code!='' && options.invite_code!=undefined){
provider: 'weixin', uni.login({
success: (res)=> { provider: 'weixin',
var params = '' success: (res)=> {
if(obj.channel!='' && obj.channel!=undefined){ if (res.code) {
params = { var params = {
code:res.code, code:res.code,
channel:obj.channel, invite_code:options.invite_code,//
source_code:obj.source_code
}
}
if(obj.invite_code!='' && obj.invite_code!=undefined){
params = {
code:res.code,
invite_code:obj.invite_code,//
}
} }
if(obj.coding!='' && obj.coding!=undefined){ this.$requst.post('user/login',params).then(res => {
params = {service_coding:obj.coding} if(res.data.token!=''){
this.$requst.post('user/bind-service',params).then(res => {console.log('调用成功');},error => {}) if(res.data.is_active==0) {
} else { this.haveImg = false
this.$requst.post('user/login',params).then(res => {console.log('调用成功');},error => {}) this.vision = true
} }
}, }
}); },error => {})
} }
},
});
}
const query = wx.createSelectorQuery() const query = wx.createSelectorQuery()
query.select('.statusHNH').boundingClientRect((rect) => { query.select('.statusHNH').boundingClientRect((rect) => {
// log('+',rect.height); // log('+',rect.height);
@ -247,15 +243,6 @@
} }
}) })
}, },
changeBanner(e){
this.bcurrent = e.detail.current//
},
playVideo(index){
// console.log('');
uni.navigateTo({
url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
})
},
closeEv(){ closeEv(){
this.isQuan = false; this.isQuan = false;
}, },
@ -545,9 +532,5 @@
</script> </script>
<style> <style>
.banner-box{position: relative;}
.img{width:100%;}
.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
.dotActive{width: 22rpx;height: 12rpx;margin-right: 10rpx;border-radius: 20rpx; background-color: rgba(56, 117, 246, 1);}
.dotMo{width: 12rpx;height: 12rpx;margin-right: 10rpx;border-radius: 100%;background-color: rgba(191, 191, 191, 1);}
</style> </style>

View File

@ -5,7 +5,7 @@
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy32"> <view :style="{paddingTop: statusHNH+'px'}" class="pad-zy32">
<!-- 自定义轮播 --> <!-- 自定义轮播 -->
<view class="mar-s20"> <view class="mar-s20">
<swiper-pu :bannerList="bannerList" :newHeight="'200'" :newRadius="'10'" :newBottom="'5'"></swiper-pu> <swiper-pu :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'200'" :newRadius="'10'" :newBottom="'5'"></swiper-pu>
</view> </view>
<!-- 导航 --> <!-- 导航 -->
<view class="mar-s50 pad-s10"> <view class="mar-s50 pad-s10">
@ -66,7 +66,8 @@
size:10, size:10,
total:'',// total:'',//
isZanw:true, isZanw:true,
bannerList:[] bannerList:[],
isAutoPlay:false
} }
}, },
onPageScroll(e) { onPageScroll(e) {
@ -82,7 +83,14 @@
} }
}, },
onShow() { onShow() {
this.$toolAll.tools.isLogin() this.$toolAll.tools.isLogin();
this.isAutoPlay = true;
},
onHide() {
this.isAutoPlay = false;
},
onUnload() {
this.isAutoPlay = false;
}, },
onLoad() { onLoad() {
this.checkAbout(this.category_id) this.checkAbout(this.category_id)

View File

@ -20,7 +20,7 @@
<view v-show="cateCurrent==isNum"> <view v-show="cateCurrent==isNum">
<view class="pad-zy32"> <view class="pad-zy32">
<!-- 自定义轮播 --> <!-- 自定义轮播 -->
<swiper-pu :browseP="true" :bannerList="bannerList" :newHeight="'250'" :newRadius="'10'" :newBottom="'5'"></swiper-pu> <swiper-pu :browseP="true" :isplay="isAutoPlay" :bannerList="bannerList" :newHeight="'450'" :newRadius="'10'" :newBottom="'5'"></swiper-pu>
<!-- 标题 --> <!-- 标题 -->
<view class="fon36 col3 bold mar-sx20 clips2" style="line-height: 50rpx;">{{detailObj.title}}</view> <view class="fon36 col3 bold mar-sx20 clips2" style="line-height: 50rpx;">{{detailObj.title}}</view>
<view class="disjbac"> <view class="disjbac">
@ -197,7 +197,9 @@
// jieDuan:false, // jieDuan:false,
share_id:0, share_id:0,
invite_code:'', invite_code:'',
isShowP:false isShowP:false,
bcurrent:0,
isAutoPlay:false
} }
}, },
onPageScroll(e) { onPageScroll(e) {
@ -241,6 +243,13 @@
  return shareObj;   return shareObj;
}, },
onShow() { onShow() {
this.isAutoPlay = true;
},
onHide() {
this.isAutoPlay = false;
},
onUnload() {
this.isAutoPlay = false;
}, },
onLoad(options) { onLoad(options) {
if(options.category_id!=undefined) { if(options.category_id!=undefined) {
@ -597,4 +606,5 @@
</script> </script>
<style> <style>
</style> </style>