Skip to content

yanghanwen / wanda-vr

Go to a project
Commit f585036b by 白宇
Options

swiper touch 优化

parent 41c4085e
Showing with 21 additions and 65 deletions
libs/rem.js
......@@ -7,7 +7,6 @@
a=function(){
var n=t.clientWidth||320;n>750&&(n=750);
t.style.fontSize=n/d+"px"
alert(1)
window.$rem = n/d
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
......
show copy.html
......@@ -336,7 +336,7 @@
</style>
</head>
<body>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
......
show.html
......@@ -7,26 +7,14 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/rem.js"></script>
<script src="./libs/helper.js"></script>
<script src="./libs/html2canvas.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<link rel="stylesheet" href="./libs/swiper-bundle.min.css">
<script src="./libs/swiper-bundle.min.js"></script>
<style>
html,body{
background:#000;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
width: 100%;
height: 100%;
}
#canvasEle{
position: fixed;
left: 200%;
......@@ -350,7 +338,7 @@
<body>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}">
<div class="nav-list" ref=nav>
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img :src="item.small_image" class="nav-item__icon" />
......@@ -358,28 +346,15 @@
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in navs" :key="index">
<div class="mtitle">
{{navs[index].title}}
{{navs[activeIdx].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[index].image" />
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[index].content"></div>
<div class="content__text" v-html="navs[activeIdx].content"></div>
</div>
</div>
</div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster" >
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
......@@ -417,7 +392,7 @@
<canvas id="canvasEle"></canvas>
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var myswiper
var vueInstance = new Vue({
el:'#app',
data(){
......@@ -603,11 +578,6 @@ var vueInstance = new Vue({
},
async setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
try {
myswiper.slideTo(Number(idx))
} catch (error) {
}
//this.shareDesc = this.navs[this.activeIdx].content
this.curShareImg = this.navs[this.activeIdx].share_image;
if(initJsSdk)this.shareToFirends()
......@@ -616,7 +586,6 @@ var vueInstance = new Vue({
var category_id = getQueryByString(location.href,'id')
this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
......@@ -644,36 +613,21 @@ var vueInstance = new Vue({
})
this.loadReady = true
this.swiperInit()
setTimeout(() => {
this.generatePost();
}, 1000);
},
swiperInit(){
var that = this
setTimeout(function(){
myswiper = new Swiper('.swiper-container',{
on: {
slideChangeTransitionEnd: function(){
that.activeIdx =this.activeIndex
that.$refs.nav.scrollLeft = 1.72 * this.activeIndex * $rem
}
}
})
},100)
}
},
created(){
this._init_func()
},
mounted(){
},
this._init_func()
}
})
</script>
<script src="./libs/rem.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
......
show1.html
......@@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/rem.js"></script>
<script src="./libs/rem.js?123123"></script>
<script src="./libs/helper.js"></script>
<script src="./libs/html2canvas.js"></script>
<script src="./libs/vue/vue.js"></script>
......@@ -376,10 +376,6 @@
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster" >
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
......@@ -418,6 +414,7 @@
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var myswiper
var swiperStartType = 'nav' //swiper 触发方式 滑动 nav点击
var vueInstance = new Vue({
el:'#app',
data(){
......@@ -602,6 +599,7 @@ var vueInstance = new Vue({
// showModal()
},
async setActive(idx,initJsSdk=true){
swiperStartType = 'nav'
this.activeIdx = Number(idx)
try {
myswiper.slideTo(Number(idx))
......@@ -656,9 +654,14 @@ var vueInstance = new Vue({
myswiper = new Swiper('.swiper-container',{
on: {
slideChangeTransitionEnd: function(){
that.activeIdx =this.activeIndex
that.$refs.nav.scrollLeft = 1.72 * this.activeIndex * $rem
}
that.activeIdx = this.activeIndex ;
that.curShareImg = that.navs[this.activeIndex].share_image;
if (swiperStartType !== 'nav') that.$refs.nav.scrollLeft = 1.72 * (this.activeIndex-3) * $rem
},
touchMove: function(swiper,event){
//你的事件
swiperStartType = 'touchMove'
},
}
})
},100)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment