weex slider如何仿安卓viewpager实现滑动切换页面

weex slider如何仿安卓viewpager实现滑动切换页面。

->

app.vue

<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: "../../tfs/TB1OOl1SVXXXXc_XVXXXXXXXXXX-340-340.png"
            }
        },
        components: {
            scoorl,
            zidingyishijian
        },
        methods: {
            incrementTotal: function () {
                this.total += 1
            }
        }

    }
</script>

scoorl .vue

<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: "../../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>

效果图

web端


安卓端