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端

安卓端