{"size": 14007, "ext": "js", "max_stars_repo_path": "dist/docs/static/js/68.91759cb24856556680fe.js", "max_stars_repo_name": "stys35/mintui-docs", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "dist/docs/static/js/68.91759cb24856556680fe.js", "max_issues_repo_name": "stys35/mintui-docs", "max_issues_repo_issues_event_min_datetime": "2020-12-04T20:12:24.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-11T08:54:48.000Z", "max_forks_repo_path": "dist/docs/static/js/68.91759cb24856556680fe.js", "max_forks_repo_name": "stys35/mintui-docs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 7003.5, "max_line_length": 13955, "alphanum_fraction": 0.5255943457}
webpackJsonp([68],{179:function(t,s,v){t.exports=v(259)},259:function(t,s,v){var a=v(3)(null,v(368),null,null);t.exports=a.exports},368:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,v=t._self._c||s;return v("section",[v("h1",[t._v("Loadmore")]),t._v(" "),v("blockquote",[v("p",[t._v("下拉/上拉刷新，支持自定义 HTML 模板。")])]),t._v(" "),v("hr"),t._v(" "),v("h2",[t._v("引入")]),t._v(" "),v("pre",[v("code",{staticClass:"language-javascript"},[v("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" { Loadmore } "),v("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),v("span",{staticClass:"hljs-string"},[t._v("'mint-ui'")]),t._v(";\n\nVue.component(Loadmore.name, Loadmore);\n")])]),t._v(" "),v("h2",[t._v("例子")]),t._v(" "),v("pre",[v("code",{staticClass:"language-html"},[v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("mt-loadmore")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v(":top-method")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"loadTop"')]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v(":bottom-method")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"loadBottom"')]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v(":bottom-all-loaded")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"allLoaded"')]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("ref")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"loadmore"')]),t._v(">")]),t._v("\n  "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("ul")]),t._v(">")]),t._v("\n    "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("li")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"item in list"')]),t._v(">")]),v("span",[t._v("{{")]),t._v(" item "),v("span",[t._v("}}")]),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("li")]),t._v(">")]),t._v("\n  "),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("ul")]),t._v(">")]),t._v("\n"),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("mt-loadmore")]),t._v(">")]),t._v("\n")])]),t._v(" "),v("p",[t._v("以列表顶部的下拉刷新为例：按住列表，下拉一定距离（通过 "),v("code",[t._v("topDistance")]),t._v(" 配置）后释放，被指定为 "),v("code",[t._v("top-method")]),t._v(" 的方法就会执行")]),t._v(" "),v("pre",[v("code",{staticClass:"language-javascript"},[t._v("loadTop() {\n  ..."),v("span",{staticClass:"hljs-comment"},[t._v("// 加载更多数据")]),t._v("\n  "),v("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$refs.loadmore.onTopLoaded();\n}\n")])]),t._v(" "),v("p",[t._v("注意在这个方法的最后需要手动调用 "),v("code",[t._v("loadmore")]),t._v(" 的 "),v("code",[t._v("onTopLoaded")]),t._v(" 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。")]),t._v(" "),v("p",[t._v("列表底部的上拉刷新与之类似")]),t._v(" "),v("pre",[v("code",{staticClass:"language-javascript"},[t._v("loadBottom() {\n  ..."),v("span",{staticClass:"hljs-comment"},[t._v("// 加载更多数据")]),t._v("\n  "),v("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".allLoaded = "),v("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";"),v("span",{staticClass:"hljs-comment"},[t._v("// 若数据已全部获取完毕")]),t._v("\n  "),v("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$refs.loadmore.onBottomLoaded();\n}\n")])]),t._v(" "),v("p",[t._v("唯一的区别是，当底部数据全部获取完毕时，可以将绑定到组件 "),v("code",[t._v("bottom-all-loaded")]),t._v(" 属性的变量赋值为 "),v("code",[t._v("true")]),t._v("，这样 "),v("code",[t._v("bottom-method")]),t._v(" 就不会再次执行了。")]),t._v(" "),v("p",[t._v("手指在屏幕上滑动的距离与组件实际移动的距离比值可以通过 "),v("code",[t._v("distance-index")]),t._v(" 参数配置，默认值为 2。")]),t._v(" "),v("h2",[t._v("自定义 HTML 模板")]),t._v(" "),v("p",[t._v("可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板")]),t._v(" "),v("pre",[v("code",{staticClass:"language-html"},[v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("mt-loadmore")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v(":top-method")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"loadTop"')]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("@top-status-change")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"handleTopChange"')]),t._v(">")]),t._v("\n    "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("ul")]),t._v(">")]),t._v("\n      "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("li")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"item in list"')]),t._v(">")]),v("span",[t._v("{{")]),t._v(" item "),v("span",[t._v("}}")]),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("li")]),t._v(">")]),t._v("\n    "),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("ul")]),t._v(">")]),t._v("\n    "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"top"')]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v('"mint-loadmore-top"')]),t._v(">")]),t._v("\n      "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("v-show")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v("\"topStatus !== 'loading'\"")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v(":class")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v("\"{ 'rotate': topStatus === 'drop' }\"")]),t._v(">")]),t._v("↓"),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n      "),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),v("span",{staticClass:"hljs-attr"},[t._v("v-show")]),t._v("="),v("span",{staticClass:"hljs-string"},[t._v("\"topStatus === 'loading'\"")]),t._v(">")]),t._v("Loading..."),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n    "),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n  "),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("mt-loadmore")]),t._v(">")]),t._v("\n"),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),v("span",{staticClass:"hljs-tag"},[t._v("<"),v("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),v("span",{staticClass:"javascript"},[t._v("\n  "),v("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),v("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    data() {\n      "),v("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        "),v("span",{staticClass:"hljs-attr"},[t._v("topStatus")]),t._v(": "),v("span",{staticClass:"hljs-string"},[t._v("''")]),t._v(",\n        "),v("span",{staticClass:"hljs-comment"},[t._v("// ...")]),t._v("\n      };\n    },\n    "),v("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n      handleTopChange(status) {\n        "),v("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".topStatus = status;\n      },\n      "),v("span",{staticClass:"hljs-comment"},[t._v("// ...")]),t._v("\n    },\n    "),v("span",{staticClass:"hljs-comment"},[t._v("// ...")]),t._v("\n  };\n")]),v("span",{staticClass:"hljs-tag"},[t._v("</"),v("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])]),t._v(" "),v("p",[t._v("比如需要配置列表顶部的 HTML，则需要为自定义 HTML 模板的最外层标签设置 "),v("code",[t._v("slot")]),t._v(" 属性为 "),v("code",[t._v("top")]),t._v("，类名为 "),v("code",[t._v("mint-loadmore-top")]),t._v("。当用户滑动组件时，组件会有以下几个状态：")]),t._v(" "),v("ul",[v("li",[v("code",[t._v("pull")]),t._v("：组件已经被按下，但按下的距离未达到 "),v("code",[t._v("topDistance")]),t._v("，此时释放不会触发 "),v("code",[t._v("top-method")]),t._v("，列表会回到初始位置")]),t._v(" "),v("li",[v("code",[t._v("drop")]),t._v("：按下的距离不小于 "),v("code",[t._v("topDistance")]),t._v("，此时释放会触发 "),v("code",[t._v("top-method")])]),t._v(" "),v("li",[v("code",[t._v("loading")]),t._v("：组件已被释放，"),v("code",[t._v("top-method")]),t._v(" 正在执行\n每当组件的状态发生变化时，"),v("code",[t._v("loadmore")]),t._v(" 都会触发 "),v("code",[t._v("top-status-change")]),t._v(" 方法，参数为组件目前的状态。因此可以像本例一样，使用一个 "),v("code",[t._v("handleTopChange")]),t._v(" 方法来处理组件状态的变化。")])]),t._v(" "),v("h2",[t._v("配置加载提示区域的文字")]),t._v(" "),v("p",[t._v("在不使用自定义 HTML 模板的情况下，可以配置 "),v("code",[t._v("loadmore")]),t._v(" 本身自带的加载提示区域的文字。以列表顶部为例，对应于 "),v("code",[t._v("status")]),t._v(" 的三个状态，可配置的属性依次为 "),v("code",[t._v("topPullText")]),t._v("、"),v("code",[t._v("topDropText")]),t._v(" 和 "),v("code",[t._v("topLoadingText")]),t._v("。与之对应的底部属性为 "),v("code",[t._v("bottomPullText")]),t._v("、"),v("code",[t._v("bottomDropText")]),t._v(" 和 "),v("code",[t._v("bottomLoadingText")]),t._v("。")]),t._v(" "),v("h2",[t._v("自动检测")]),t._v(" "),v("p",[v("code",[t._v("loadmore")]),t._v(" 在初始化时会自动检测它的高度是否能够撑满其容器，如果不能则会调用 "),v("code",[t._v("bottom-method")]),t._v("，直到撑满容器为止。如果不希望使用这一机制，可以将 "),v("code",[t._v("auto-fill")]),t._v(" 设为 "),v("code",[t._v("false")]),t._v("。")]),t._v(" "),v("h2",[t._v("API")]),t._v(" "),v("div",{staticClass:"table-container"},[v("table",{staticClass:"table"},[v("thead",[v("tr",[v("th",[t._v("参数")]),t._v(" "),v("th",[t._v("说明")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("可选值")]),t._v(" "),v("th",[t._v("默认值")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("autoFill")]),t._v(" "),v("td",[t._v("若为真，"),v("code",[t._v("loadmore")]),t._v(" 会自动检测并撑满其容器")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("true")])]),t._v(" "),v("tr",[v("td",[t._v("distanceIndex")]),t._v(" "),v("td",[t._v("手指移动与组件移动距离的比值")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("2")])]),t._v(" "),v("tr",[v("td",[t._v("maxDistance")]),t._v(" "),v("td",[t._v("组件可移动的最大距离（像素），若为 0 则不限制")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("0")])]),t._v(" "),v("tr",[v("td",[t._v("topPullText")]),t._v(" "),v("td",[v("code",[t._v("topStatus")]),t._v(" 为 "),v("code",[t._v("pull")]),t._v(" 时加载提示区域的文字")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("'下拉刷新'")])]),t._v(" "),v("tr",[v("td",[t._v("topDropText")]),t._v(" "),v("td",[v("code",[t._v("topStatus")]),t._v(" 为 "),v("code",[t._v("drop")]),t._v(" 时加载提示区域的文字")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("'释放更新'")])]),t._v(" "),v("tr",[v("td",[t._v("topLoadingText")]),t._v(" "),v("td",[v("code",[t._v("topStatus")]),t._v(" 为 "),v("code",[t._v("loading")]),t._v(" 时加载提示区域的文字")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("'加载中...'")])]),t._v(" "),v("tr",[v("td",[t._v("topDistance")]),t._v(" "),v("td",[t._v("触发 "),v("code",[t._v("topMethod")]),t._v(" 的下拉距离阈值（像素）")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("70")])]),t._v(" "),v("tr",[v("td",[t._v("topMethod")]),t._v(" "),v("td",[t._v("下拉刷新执行的方法")]),t._v(" "),v("td",[t._v("Function")]),t._v(" "),v("td"),t._v(" "),v("td")]),t._v(" "),v("tr",[v("td",[t._v("bottomPullText")]),t._v(" "),v("td",[v("code",[t._v("bottomStatus")]),t._v(" 为 "),v("code",[t._v("pull")]),t._v(" 时加载提示区域的文字")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("'上拉刷新'")])]),t._v(" "),v("tr",[v("td",[t._v("bottomDropText")]),t._v(" "),v("td",[v("code",[t._v("bottomStatus")]),t._v(" 为 "),v("code",[t._v("drop")]),t._v(" 时加载提示区域的文字")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("'释放更新'")])]),t._v(" "),v("tr",[v("td",[t._v("bottomLoadingText")]),t._v(" "),v("td",[v("code",[t._v("bottomStatus")]),t._v(" 为 "),v("code",[t._v("loading")]),t._v(" 时加载提示区域的文字")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("'加载中...'")])]),t._v(" "),v("tr",[v("td",[t._v("bottomDistance")]),t._v(" "),v("td",[t._v("触发 "),v("code",[t._v("bottomMethod")]),t._v(" 的上拉距离阈值（像素）")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("70")])]),t._v(" "),v("tr",[v("td",[t._v("bottomMethod")]),t._v(" "),v("td",[t._v("上拉刷新执行的方法")]),t._v(" "),v("td",[t._v("Function")]),t._v(" "),v("td"),t._v(" "),v("td")]),t._v(" "),v("tr",[v("td",[t._v("bottomAllLoaded")]),t._v(" "),v("td",[t._v("若为真，则 "),v("code",[t._v("bottomMethod")]),t._v(" 不会被再次触发")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("false")])])])])]),v("h2",[t._v("Events")]),t._v(" "),v("div",{staticClass:"table-container"},[v("table",{staticClass:"table"},[v("thead",[v("tr",[v("th",[t._v("事件名称")]),t._v(" "),v("th",[t._v("说明")]),t._v(" "),v("th",[t._v("回调参数")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("top-status-change")]),t._v(" "),v("td",[t._v("组件顶部状态发生变化时的回调函数")]),t._v(" "),v("td",[t._v("组件顶部的新状态名")])]),t._v(" "),v("tr",[v("td",[t._v("bottom-status-change")]),t._v(" "),v("td",[t._v("组件底部状态发生变化时的回调函数")]),t._v(" "),v("td",[t._v("组件底部的新状态名")])])])])]),v("h2",[t._v("Slot")]),t._v(" "),v("div",{staticClass:"table-container"},[v("table",{staticClass:"table"},[v("thead",[v("tr",[v("th",[t._v("name")]),t._v(" "),v("th",[t._v("描述")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("-")]),t._v(" "),v("td",[t._v("数据列表")])]),t._v(" "),v("tr",[v("td",[t._v("top")]),t._v(" "),v("td",[t._v("自定义顶部加载提示区域 HTML 模板")])]),t._v(" "),v("tr",[v("td",[t._v("bottom")]),t._v(" "),v("td",[t._v("自定义底部加载提示区域 HTML 模板")])])])])])])}]}}});
//# sourceMappingURL=68.91759cb24856556680fe.js.map