github:https://github.com/gt0608/weex
weex slider 滑动切换页面仿安卓viewpager
之前不知道在哪里看到过这样的博客,于是花了一天时间写了下,自己是小菜鸟,过路人不要笑
- **使用
-> <scoorl :message="parentMsg"></scoorl>
app.vue
<template>
<div class="app">
<scoorl :message="parentMsg"></scoorl>
</div>
</template>
<script>
import text1 from './components/text1.vue'
import Hello from './components/Hello.vue'
import scoorl from './components/scoorl.vue'
import zidingyishijian from './components/zidingyishijian.vue'
export default {
name: 'app',
data () {
return {
total: 1,
parentMsg: [
{
name: 'Runoob',
index:0,
src:"http://101.200.147.220:8080/a/home.js",
visibility: 'visible'
},
{
name: 'Google',
index:1,
src:"http://101.200.147.220:8080/a/home.js",
visibility: 'hidden'
},
{
name: 'Taobao',
index:2,
src: 'http://101.200.147.220:8080/a/message.js',
visibility: 'hidden'
}
],
src: "https://img.alicdn.com/tfs/TB1OOl1SVXXXXc_XVXXXXXXXXXX-340-340.png"
}
},
components: {
scoorl,
zidingyishijian
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
}
</script>
<style scoped>
.app {
left: 0px;
right: 0px;
top: 0px;
}
</style>
scoorl .vue
<template>
<div style="flex-direction: column">
<div class="hello">
<div class="title1" v-for="(msg,index) in message" @click="selecttile(msg )">
<text :class="[sindex===msg.index?selectclass:defclass]">{{msg.name}}</text>
</div>
</div>
<div style="flex: 1">
<slider :value="val" :style="mStyle(value,index)" interval="4500" @change="onchange">
//web、无法渲染
<!--<embed-->
<!--:style="{ visibility: item.visibility }"-->
<!--v-for="(item,index) in message"-->
<!--:key="index"-->
<!--:src="item.src"-->
<!--type="weex">-->
<!--</embed>-->
<div
v-for="(item,index) in message"
:style="{ visibility: item.visibility }"
>
<text1 v-if="val===sindexweb1"></text1>
<text2 v-if="val===sindexweb2"></text2>
<text3 v-if="val===sindexweb3"></text3>
</div>
</slider>
</div>
</div>
</template>
<script>
import text1 from "./text1.vue"
import text2 from "./text2.vue"
import text3 from "./text3.vue"
// var modal = weex.requireModule('modal')
export default {
props: {
message: {default: []},
selectedColor: {default: '#2d9fff'},
unselectedColor: {default: '#000000'}
},
name: 'hello',
data () {
return {
sindexweb1: 0,
sindexweb2: 1,
sindexweb3: 2,
scrollHnadlerCallCount: 0,
selectedIndex: 0,
value: 0,
val: 0,
index: 0,
sindex: 0,
defclass: 'defclass',
selectclass: 'selectclass',
itemsrc: "https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg",
}
},
components: {
text1,
text2,
text3,
},
created () {
this.select(this.selectedIndex)
},
methods: {
mStyle: function () {
return {
width: 750 + 'px',
height: 1190 + 'px',
}
},
onchange (event) {
this.sindex = event.index
this.select(this.sindex)
//web 可以不做终端验证
if (event.index === 0) {
this.val = event.index
} else if (event.index === 1) {
this.val = event.index
} else if (event.index === 2) {
this.val = event.index
}
},
selecttile (event) {
this.sindex = event.index
this.val = this.sindex
//web 可以不做终端验证
if (event.index === 0) {
this.sindexweb1 = event.index
} else if (event.index === 1) {
this.sindexweb2 = event.index
} else if (event.index === 2) {
this.sindexweb3 = event.index
}
},
select (index) {
for (let i = 0; i < this.message.length; i++) {
console.log("点击的下标" + index);
let msg = this.message[i]
if (i == index) {
msg.visibility = 'visible'
console.log("显示的下标" + i);
} else {
msg.visibility = 'hidden'
console.log('隐藏的下标' + i);
}
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
left: 0;
right: 0;
flex-direction: row;
}
.title1 {
justify-content: center;
align-items: center;
background-color: #afddff;
height: 100px;
flex: 1;
}
.defclass {
}
.selectclass {
color: red;
}
</style>
效果图
web端
安卓端