{"id":3194,"date":"2021-04-08T14:10:34","date_gmt":"2021-04-08T06:10:34","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3194"},"modified":"2021-04-09T15:53:31","modified_gmt":"2021-04-09T07:53:31","slug":"%e5%9f%ba%e4%ba%8ebetter-scroll%e5%ae%9e%e7%8e%b0%e7%a7%bb%e5%8a%a8%e7%ab%afvue%e4%b8%8a%e6%8b%89%e5%8a%a0%e8%bd%bd%e4%b8%8b%e6%8b%89%e5%88%b7%e6%96%b0","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3194","title":{"rendered":"\u57fa\u4e8ebetter-scroll\u5b9e\u73b0\u79fb\u52a8\u7aefvue\u4e0a\u62c9\u52a0\u8f7d\u4e0b\u62c9\u5237\u65b0"},"content":{"rendered":"

\u63d2\u4ef6\u5730\u5740<\/a>
\n\u5f15\u7528\u6587\u7ae0<\/a><\/p>\n

\u4e00\u3001\u4ec0\u4e48\u4e8bbetter-scroll\uff1f<\/h3>\n

better-scroll \u662f\u4e00\u6b3e\u91cd\u70b9\u89e3\u51b3\u79fb\u52a8\u7aef\uff08\u5df2\u652f\u6301 PC\uff09\u5404\u79cd\u6eda\u52a8\u573a\u666f\u9700\u6c42\u7684\u63d2\u4ef6\u3002\u5b83\u7684\u6838\u5fc3\u662f\u501f\u9274\u7684 iscroll<\/a> \u7684\u5b9e\u73b0\uff0c\u5b83\u7684 API \u8bbe\u8ba1\u57fa\u672c\u517c\u5bb9 iscroll\uff0c\u5728 iscroll \u7684\u57fa\u7840\u4e0a\u53c8\u6269\u5c55\u4e86\u4e00\u4e9b feature \u4ee5\u53ca\u505a\u4e86\u4e00\u4e9b\u6027\u80fd\u4f18\u5316\u3002<\/p>\n

better-scroll \u662f\u57fa\u4e8e\u539f\u751f JS \u5b9e\u73b0\u7684\uff0c\u4e0d\u4f9d\u8d56\u4efb\u4f55\u6846\u67b6\u3002\u5b83\u7f16\u8bd1\u540e\u7684\u4ee3\u7801\u5927\u5c0f\u662f 63kb\uff0c\u538b\u7f29\u540e\u662f 35kb\uff0cgzip \u540e\u4ec5\u6709 9kb\uff0c\u662f\u4e00\u6b3e\u975e\u5e38\u8f7b\u91cf\u7684 JS lib\u3002<\/p>\n

\"image-20210408140234879\"<\/a><\/p>\n

better-scroll\u7684\u6eda\u52a8\u539f\u7406<\/a><\/p>\n

\u4e8c\u3001\u4f7f\u7528<\/h3>\n
1.\u5b89\u88c5<\/h5>\n

\u9996\u5148\u5728package.json\u91cc\u9762\u52a0\u5165better-scroll\u7684\u4f9d\u8d56\uff0c\u7136\u540e\u4f7f\u7528npm\u5b89\u88c5<\/p>\n

npm install better-scroll --save-dev\r\n<\/code><\/pre>\n
2.\u5f15\u5165<\/h6>\n
\u5728\u9700\u8981\u4f7f\u7528\u7684\u63d2\u4ef6\u4e2d\u5f15\u5165better-scroll<\/p>\n
 <\/p>\n
import BScroll from 'better-scroll'\r\nimport BScroll from '@better-scroll\/core' \/\/ \u65b0\u7248\u672c\u9700\u8fd9\u6837\u5f15\u7528\r\n<\/code><\/pre>\n
3.vue\u4f7f\u7528better-scroll<\/h5>\n
 <\/p>\n
<template>\r\n    <div class=\"tabbar\">\r\n        <div class=\"wrapper\" ref=\"wrapper\">\r\n            <div class=\"bscroll-container\">\r\n                <!-- \u5237\u65b0\u63d0\u793a\u4fe1\u606f -->\r\n                <div class=\"top-tip\">\r\n                    <span class=\"refresh-hook\">{{pulldownMsg}}<\/span>\r\n                <\/div>\r\n                <!-- \u5185\u5bb9\u5217\u8868 -->\r\n                <ul class=\"content\">\r\n                    <li v-for=\"item in data\">{{item}}<\/li>\r\n                <\/ul>\r\n                <!-- \u5e95\u90e8\u63d0\u793a\u4fe1\u606f -->\r\n                <div class=\"bottom-tip\">\r\n                    <span class=\"loading-hook\">{{pullupMsg}}<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- alert\u63d0\u793a\u5237\u65b0\u6210\u529f -->\r\n        <div class=\"alert-hook\" :style=\"{display: alertHook}\">\u5237\u65b0\u6210\u529f<\/div>\r\n    <\/div>\r\n<\/template>\r\n<\/code><\/pre>\n
 <\/p>\n
<script>\r\nimport BScroll from \"better-scroll\"\r\nconst count = 1\r\n    export default {\r\n        data(){\r\n            return {\r\n                data: [0,1,2,3,4,5,6],\r\n                pulldownMsg: '\u4e0b\u62c9\u5237\u65b0',\r\n                pullupMsg: '\u52a0\u8f7d\u66f4\u591a',\r\n                alertHook: 'none'\r\n            }\r\n        },\r\n        methods: {\r\n            getData() {\r\n                return new Promise(resolve => {  \/\/\u6a21\u62df\u6570\u636e\u8bf7\u6c42\r\n                    setTimeout(() => {\r\n                        const arr = [];\r\n                        for (let i = 0; i < 20; i++) {\r\n                            arr.push(count++)\r\n                        }\r\n                        resolve(arr)\r\n                    }, 1000)\r\n                })\r\n            },\r\n            refreshalert(){   \/\/\u5237\u65b0\u6210\u529f\u63d0\u793a\r\n                this.alertHook = 'block';\r\n                setTimeout(()=>{\r\n                    this.alertHook = 'none'\r\n                },1000)\r\n            }\r\n        },\r\n        created(){\r\n            const that = this;\r\n            this.$nextTick(() => {\r\n                    this.scroll = new BScroll(this.$refs.wrapper,{       \/\/\u521d\u59cb\u5316better-scroll\r\n                        probeType:1,   \/\/1 \u6eda\u52a8\u7684\u65f6\u5019\u4f1a\u6d3e\u53d1scroll\u4e8b\u4ef6\uff0c\u4f1a\u622a\u6d41\u30022\u6eda\u52a8\u7684\u65f6\u5019\u5b9e\u65f6\u6d3e\u53d1scroll\u4e8b\u4ef6\uff0c\u4e0d\u4f1a\u622a\u6d41\u3002 3\u9664\u4e86\u5b9e\u65f6\u6d3e\u53d1scroll\u4e8b\u4ef6\uff0c\u5728swipe\u7684\u60c5\u51b5\u4e0b\u4ecd\u7136\u80fd\u5b9e\u65f6\u6d3e\u53d1scroll\u4e8b\u4ef6\r\n                        click: true   \/\/\u662f\u5426\u6d3e\u53d1click\u4e8b\u4ef6\r\n                    })\r\n                    \/\/ \u6ed1\u52a8\u8fc7\u7a0b\u4e2d\u4e8b\u4ef6\r\n                    this.scroll.on('scroll',(pos)=>{\r\n                        if(pos.y > 30){\r\n                            this.pulldownMsg = '\u91ca\u653e\u7acb\u5373\u5237\u65b0'\r\n                        }\r\n                    });\r\n                    \/\/\u6ed1\u52a8\u7ed3\u675f\u677e\u5f00\u4e8b\u4ef6\r\n                    this.scroll.on('touchEnd',(pos) =>{  \/\/\u4e0a\u62c9\u5237\u65b0\r\n                        if(pos.y > 30){\r\n                            setTimeout(()=>{\r\n                                that.getData().then((res)=>{\r\n                                    \/\/\u5237\u65b0\u6570\u636e\r\n                                    that.data = res;\r\n                                    \/\/\u6062\u590d\u5237\u65b0\u63d0\u793a\u6587\u672c\u503c\r\n                                    that.pulldownMsg = '\u4e0b\u62c9\u5237\u65b0'\r\n                                    \/\/\u5237\u65b0\u6210\u529f\u540e\u63d0\u793a\r\n                                    that.refreshalert();\r\n                                    \/\/\u5237\u65b0\u5217\u8868\u540e\uff0c\u91cd\u65b0\u8ba1\u7b97\u6eda\u52a8\u533a\u57df\u9ad8\u5ea6\r\n                                    that.scroll.refresh();\r\n                                })\r\n                            },2000)\r\n                        } \r\n                        else if(pos.y<(this.scroll.maxScrollY - 30)){   \/\/\u4e0b\u62c9\u52a0\u8f7d\r\n                            this.pullupMsg = '\u52a0\u8f7d\u4e2d\u3002\u3002\u3002';\r\n                            setTimeout(()=>{\r\n                                that.getData().then((res)=>{\r\n                                    \/\/\u6062\u590d\u6587\u672c\u503c\r\n                                    that.pullupMsg = '\u52a0\u8f7d\u66f4\u591a';\r\n                                    that.data = this.data.concat(res);\r\n                                    that.scroll.refresh();\r\n                                })\r\n                            },2000)\r\n                            \r\n                        }\r\n                    })      \r\n            })\r\n        }\r\n    }\r\n<\/script>\r\n<\/code><\/pre>\n
 <\/p>\n
\/\/css\r\n    .wrapper{\r\n        width: 100%;\r\n        height: 300px;\r\n        background: #ccc;\r\n        overflow: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    li{\r\n        line-height: 50px;\r\n        border-bottom: 1px solid #ccc;\r\n        text-align: center;\r\n    }\r\n\r\n    \/* \u4e0b\u62c9\u3001\u4e0a\u62c9\u63d0\u793a\u4fe1\u606f *\/\r\n    .top-tip{\r\n        position: absolute;  \r\n        top: -40px;  \r\n        left: 0;\r\n        z-index: 1;  \r\n        width: 100%;  \r\n        height:40px;  \r\n        line-height:40px;  \r\n        text-align:center;\r\n        color: #555;\r\n    } \r\n      \r\n    .bottom-tip{\r\n        width: 100%;\r\n        height: 35px;\r\n        line-height: 35px;\r\n        text-align: center;\r\n        color: #777;\r\n        background: #f2f2f2;\r\n        position: absolute;\r\n        bottom: -35px;\r\n        left: 0;\r\n    }\r\n\r\n\r\n    \/* \u5168\u5c40\u63d0\u793a\u4fe1\u606f *\/\r\n    .alert-hook{\r\n        display: none;\r\n        position: fixed;\r\n        top: 62px;\r\n        left: 0;\r\n        z-index: 2;\r\n        width: 100%;\r\n        height: 35px;\r\n        line-height: 35px;\r\n        text-align: center;\r\n        color: #fff;\r\n        font-size: 12px;\r\n        background: rgba(7, 17, 27, 0.5);\r\n    }\r\n<\/code><\/pre>\n
 <\/p>\n
\u53c2\u8003 iScroll<\/a><\/p>\n
\"image-20210408140403708\"<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
\u53c2\u8003-\u5b9e\u73b0\u539f\u7406\u5206\u6790<\/a><\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u63d2\u4ef6\u5730\u5740 \u5f15\u7528\u6587\u7ae0 \u4e00\u3001\u4ec0\u4e48\u4e8bbetter-scroll\uff1f better-scroll \u662f\u4e00\u6b3e\u91cd\u70b9\u89e3\u51b3\u79fb\u52a8\u7aef\uff08 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,105],"tags":[155],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3194"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3194"}],"version-history":[{"count":6,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3194\/revisions"}],"predecessor-version":[{"id":3213,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3194\/revisions\/3213"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}