Skip to content

shuzilixiangwaibao / wanda-vr

Go to a project
Commit 41c4085e by 白宇
Options

show swiper

parent b623424e
Showing with 132 additions and 38 deletions
libs/rem.js
......@@ -7,6 +7,8 @@
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))
}(window);
libs/swiper-bundle.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
show.html
......@@ -7,14 +7,26 @@
<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>
<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%;
......@@ -336,9 +348,9 @@
</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-list" ref=nav>
<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" />
......@@ -346,15 +358,28 @@
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div class="mtitle">
{{navs[activeIdx].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></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}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[index].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[index].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" />
......@@ -392,7 +417,7 @@
<canvas id="canvasEle"></canvas>
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var myswiper
var vueInstance = new Vue({
el:'#app',
data(){
......@@ -578,6 +603,11 @@ 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()
......@@ -586,9 +616,10 @@ 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})
this.refreshShareText(true)
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
......@@ -613,21 +644,36 @@ 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(){
},
})
</script>
<script src="./libs/rem.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
......
show1.html
......@@ -7,14 +7,26 @@
<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>
<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%;
......@@ -336,9 +348,9 @@
</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-list" ref=nav>
<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" />
......@@ -346,15 +358,28 @@
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div class="mtitle">
{{navs[activeIdx].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></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}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[index].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[index].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" />
......@@ -392,7 +417,7 @@
<canvas id="canvasEle"></canvas>
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var myswiper
var vueInstance = new Vue({
el:'#app',
data(){
......@@ -578,6 +603,11 @@ 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()
......@@ -586,9 +616,10 @@ 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})
this.refreshShareText(true)
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
......@@ -613,21 +644,36 @@ 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(){
},
})
</script>
<script src="./libs/rem.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
......
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