weex slider 滑动切换页面防安卓viewpager

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端

安卓端