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