demo 原始链接:https://vux.li/demos/v2/#/component/swiper
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group-title>THX to: https://github.com/wechatui/swiper</group-title>\n <group-title>list模式下,默认高度为180px, 如果设置aspect-ratio会根据宽度自动计算高度</group-title>\n <swiper :list=\"demo01_list\" v-model=\"demo01_index\" @on-index-change=\"demo01_onIndexChange\"></swiper>\n <p class=\"copyright\">Image Source: http://www.gratisography.com/</p>\n <p>current index: {{demo01_index}}</p>\n <x-button @click.native=\"demo01_index = 0\">go to 0</x-button>\n <x-button @click.native=\"demo01_index = 1\">go to 1</x-button>\n <x-button @click.native=\"demo01_index = 2\">go to 2</x-button>\n\n <br/>\n <br/>\n <swiper :list=\"demo01_list\" v-model=\"demo02_index\" @on-index-change=\"demo01_onIndexChange\"></swiper>\n <br>\n <br>\n <divider>华丽的分割线</divider>\n\n\n <group-title>设置aspect-ratio, 将自动根据宽度计算高度</group-title>\n <swiper :list=\"demo02_list\" style=\"width:85%;margin:0 auto;\" :aspect-ratio=\"300/800\" dots-position=\"center\"></swiper>\n\n <br/>\n <br/>\n <divider>华丽的分割线</divider>\n\n <group-title>自动轮播</group-title>\n <swiper :list=\"demo03_list\" auto style=\"width:80%;margin:0 auto;\" height=\"180px\" dots-class=\"custom-bottom\" dots-position=\"center\"></swiper>\n <br/>\n <br/>\n <divider>华丽的分割线</divider>\n\n <group-title>use swiper-item for image list</group-title>\n <swiper :aspect-ratio=\"300/800\">\n <swiper-item class=\"swiper-demo-img\" v-for=\"(item, index) in demo04_list\" :key=\"index\"><img :src=\"item\"></swiper-item>\n </swiper>\n\n <br>\n <br>\n\n <group-title>set index = 1 with swiper-item</group-title>\n <swiper :aspect-ratio=\"300/800\" @on-index-change=\"onSwiperItemIndexChange\" v-model=\"swiperItemIndex\">\n <swiper-item class=\"swiper-demo-img\" v-for=\"(item, index) in demo04_list\" :key=\"index\">\n <img :src=\"item\">\n </swiper-item>\n </swiper>\n <br>\n {{ swiperItemIndex }}\n <br>\n <x-button @click.native=\"swiperItemIndex = 0\">go to 0</x-button>\n <x-button @click.native=\"swiperItemIndex = 1\">go to 1</x-button>\n <x-button @click.native=\"swiperItemIndex = 2\">go to 2</x-button>\n\n\n <br/>\n <br/>\n <divider>华丽的分割线</divider>\n\n <group-title>Async setting list data</group-title>\n <swiper :list=\"demo05_list\" auto height=\"180px\" @on-index-change=\"demo05_onIndexChange\"></swiper>\n <p> current index: {{demo05_index}}</p>\n <x-button @click.native=\"demo05_onLoad(1)\" type=\"primary\" style=\"margin: 10px 0;\">Load list1</x-button>\n <x-button @click.native=\"demo05_onLoad(2)\" type=\"primary\" style=\"margin: 10px 0;\">Load list2</x-button>\n\n <br/>\n <br/>\n <divider>华丽的分割线</divider>\n\n <group-title>引入swiper-item自定义item内容,用height定义高度</group-title>\n <swiper auto height=\"100px\">\n <swiper-item class=\"black\"><h2 class=\"title fadeInUp animated\">它无孔不入</h2></swiper-item>\n <swiper-item class=\"black\"><h2 class=\"title fadeInUp animated\">你无处可藏</h2></swiper-item>\n <swiper-item class=\"black\"><h2 class=\"title fadeInUp animated\">不是它可恶</h2></swiper-item>\n <swiper-item class=\"black\"><h2 class=\"title fadeInUp animated\">而是它不懂你</h2></swiper-item>\n <swiper-item class=\"black\"><h2 class=\"title fadeInUp animated\">我们试图</h2></swiper-item>\n <swiper-item class=\"black\"><h2 class=\"title fadeInUp animated\">做些改变</h2></swiper-item>\n </swiper>\n\n <br/>\n <br/>\n <divider>华丽的分割线</divider>\n\n <group-title>垂直方向文字滚动</group-title>\n <swiper auto height=\"30px\" direction=\"vertical\" :interval=2000 class=\"text-scroll\" :show-dots=\"false\">\n <swiper-item><p>义务爱了 完成传奇世界H5-王者归来任务 获得20金币</p></swiper-item>\n <swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></swiper-item>\n <swiper-item><p>零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</p></swiper-item>\n <swiper-item><p>做迎而為 兑换【饿了么】畅享美食红包 消耗20金币</p></swiper-item>\n <swiper-item><p>只知道不知道 兑换【饿了么】畅享美食红包 消耗20金币</p></swiper-item>\n <swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></swiper-item>\n </swiper>\n\n <br/>\n <br/>\n <divider>华丽的分割线</divider>\n\n <group-title>循环模式</group-title>\n <swiper loop auto :list=\"demo06_list\" :index=\"demo06_index\" @on-index-change=\"demo06_onIndexChange\"></swiper>\n <p>current index: {{demo06_index}}</p>\n\n <group-title>循环模式(只有两个且可点击)</group-title>\n <swiper loop auto :list=\"demo07_list\" :index=\"demo07_index\" @on-index-change=\"demo07_onIndexChange\"></swiper>\n <p>current index: {{demo07_index}}</p>\n </div>\n</template>\n\n<script>\nimport { Swiper, GroupTitle, SwiperItem, XButton, Divider } from 'vux'\n\nconst baseList = [{\n url: 'javascript:',\n img: 'https://static.vux.li/demo/1.jpg',\n title: '送你一朵fua'\n}, {\n url: 'javascript:',\n img: 'https://static.vux.li/demo/2.jpg',\n title: '送你一辆车'\n}, {\n url: 'javascript:',\n img: 'https://static.vux.li/demo/5.jpg',\n title: '送你一次旅行',\n fallbackImg: 'https://static.vux.li/demo/3.jpg'\n}]\n\nconst imgList = [\n 'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',\n 'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',\n 'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'\n]\n\nconst urlList = baseList.map((item, index) => ({\n url: 'http://m.baidu.com',\n img: item.img,\n fallbackImg: item.fallbackImg,\n title: `(可点击)${item.title}`\n}))\n\nconst demoList = imgList.map((one, index) => ({\n url: 'javascript:',\n img: one\n}))\n\nconst only2ClickList = baseList.slice(0, 2).map(item => {\n item.url = 'http://m.baidu.com'\n return item\n})\n\nexport default {\n components: {\n Swiper,\n SwiperItem,\n GroupTitle,\n XButton,\n Divider\n },\n ready () {\n\n },\n methods: {\n onSwiperItemIndexChange (index) {\n console.log('demo item change', index)\n },\n demo01_onIndexChange (index) {\n this.demo01_index = index\n },\n demo05_onIndexChange (index) {\n this.demo05_index = index\n },\n demo05_onLoad (id) {\n this.demo05_list = id === 1 ? baseList : demoList\n },\n demo06_onIndexChange (index) {\n this.demo06_index = index\n },\n demo07_onIndexChange (index) {\n this.demo07_index = index\n }\n },\n data () {\n return {\n demo01_list: baseList,\n demo02_list: demoList,\n demo03_list: demoList,\n demo04_list: imgList,\n demo05_list: [],\n demo06_list: urlList,\n demo07_list: only2ClickList,\n demo01_index: 0,\n demo02_index: 1,\n demo05_index: 0,\n demo06_index: 0,\n demo07_index: 0,\n swiperItemIndex: 1\n }\n }\n}\n</script>\n\n<style scoped>\n.copyright {\n font-size: 12px;\n color: #ccc;\n text-align: center;\n}\n.text-scroll {\n border: 1px solid #ddd;\n border-left: none;\n border-right: none;\n}\n.text-scroll p{\n font-size: 12px;\n text-align: center;\n line-height: 30px;\n}\n.black {\n background-color: #000;\n}\n.title{\n line-height: 100px;\n text-align: center;\n color: #fff;\n}\n.animated {\n animation-duration: 1s;\n animation-fill-mode: both;\n}\n.vux-indicator.custom-bottom {\n bottom: 30px;\n}\n@-webkit-keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translate3d(0, 100%, 0);\n }\n 100% {\n opacity: 1;\n transform: none;\n }\n}\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translate3d(0, 100%, 0);\n }\n 100% {\n opacity: 1;\n transform: none;\n }\n}\n.fadeInUp {\n animation-name: fadeInUp;\n}\n.swiper-demo-img img {\n width: 100%;\n}\n</style>\n\n
\n