demo 原始链接:https://vux.li/demos/v2/#/component/scroller
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <cell is-link title=\"pullup\" link=\"/component/pullup\">Pullup</cell>\n <cell is-link title=\"pulldown\" link=\"/component/pulldown\">Pulldown</cell>\n <cell is-link title=\"pulldownpullup\" link=\"/component/pulldown-pullup\">PulldownPullup</cell>\n </group>\n\n <divider>{{ $t('A Horizontal Scroller without Scrollbar') }}</divider>\n <scroller lock-y :scrollbar-x=false>\n <div class=\"box1\">\n <div class=\"box1-item\" v-for=\"i in 7\"><span>{{' ' + i + ' '}}</span></div>\n </div>\n </scroller>\n\n <divider>{{ $t('A Horizontal Scroller with Scrollbar') }}</divider>\n <scroller lock-y scrollbar-x>\n <div class=\"box1\">\n <div class=\"box1-item\" v-for=\"i in 7\"><span>{{' ' + i + ' '}}</span></div>\n </div>\n </scroller>\n\n <divider>{{ $t('A Horizontal Scroller without bounce effect') }}</divider>\n <scroller lock-y scrollbar-x :bounce=false>\n <div class=\"box1\">\n <div class=\"box1-item\" v-for=\"i in 7\"><span>{{' ' + i + ' '}}</span></div>\n </div>\n </scroller>\n\n <divider>{{ $t('A Vertical Scroller') }} scrollTop: {{scrollTop}}</divider>\n <scroller lock-x height=\"200px\" @on-scroll=\"onScroll\" ref=\"scrollerEvent\">\n <div class=\"box2\">\n <p v-for=\"i in 80\">placeholder {{i}}</p>\n </div>\n </scroller>\n\n <x-button type=\"primary\" @click.native=\"$refs.scrollerEvent.reset({top:0})\">reset</x-button>\n\n <divider>{{ $t('event:on-scroll-bottom') }} </divider>\n <scroller lock-x height=\"200px\" @on-scroll-bottom=\"onScrollBottom\" ref=\"scrollerBottom\" :scroll-bottom-offst=\"200\">\n <div class=\"box2\">\n <p v-for=\"i in bottomCount\">placeholder {{i}}</p>\n <load-more tip=\"loading\"></load-more>\n </div>\n </scroller>\n\n <divider>{{ $t('A Vertical Scroller with scrollbar') }}</divider>\n <scroller lock-x scrollbar-y height=\"200px\" ref=\"scroller\">\n <div class=\"box2\">\n <p v-for=\"i in 20\" v-if=\"showList1\">placeholder {{ i + '' + i }}</p>\n <p v-for=\"i in 10\" v-if=\"!showList1\">placeholder {{ i }}</p>\n <x-button style=\"margin:10px 0;\" type=\"primary\" @click.native=\"onClickButton\">{{ $t('Button') }}</x-button>\n <group>\n <cell @click.native=\"onCellClick\" title=\"Title\" value=\"Value\"></cell>\n </group>\n </div>\n </scroller>\n <x-button @click.native=\"changeList\" type=\"primary\">{{ $t('show another list') }}</x-button>\n </div>\n</template>\n\n\n\n<script>\nimport { Scroller, Divider, Spinner, XButton, Group, Cell, LoadMore } from 'vux'\n\nexport default {\n components: {\n Scroller,\n Divider,\n Spinner,\n XButton,\n Group,\n Cell,\n LoadMore\n },\n data () {\n return {\n showList1: true,\n scrollTop: 0,\n onFetching: false,\n bottomCount: 20\n }\n },\n mounted () {\n this.$nextTick(() => {\n this.$refs.scrollerEvent.reset({top: 0})\n })\n this.$nextTick(() => {\n this.$refs.scrollerBottom.reset({top: 0})\n })\n },\n methods: {\n onScrollBottom () {\n if (this.onFetching) {\n // do nothing\n } else {\n this.onFetching = true\n setTimeout(() => {\n this.bottomCount += 10\n this.$nextTick(() => {\n this.$refs.scrollerBottom.reset()\n })\n this.onFetching = false\n }, 2000)\n }\n },\n onScroll (pos) {\n this.scrollTop = pos.top\n },\n onCellClick () {\n window.alert('cell click')\n },\n onClickButton () {\n window.alert('click')\n },\n changeList () {\n this.showList1 = false\n this.$nextTick(() => {\n this.$refs.scroller.reset({\n top: 0\n })\n })\n }\n }\n}\n</script>\n\n<style scoped>\n.box1 {\n height: 100px;\n position: relative;\n width: 1490px;\n}\n.box1-item {\n width: 200px;\n height: 100px;\n background-color: #ccc;\n display:inline-block;\n margin-left: 15px;\n float: left;\n text-align: center;\n line-height: 100px;\n}\n.box1-item:first-child {\n margin-left: 0;\n}\n.box2-wrap {\n height: 300px;\n overflow: hidden;\n}\n</style>\n\n
\n