前言

娣是基于某视频剪辑软件和框架开发的手机端页面用户界面组件库，开发初衷是满足公司的微信端表单需求，因为第三方的调查问卷表单系统在手机上实在比较丑（还是个人电脑那一套样式适配了大小而已)。于是用某视频剪辑软件重构了表单组件，后来一发不可收拾把其他常用组件也一并开发了。

相比于反应还是更喜欢用Vue，除了目前社区组件不多，周边构建工具还是比较完善的（作者也特别勤奋)。

下面话不多说了，来一看看详细的介绍吧。

先上图

创建项目

使用脚手架创建一个某视频剪辑软件项目

安装vux，可以参考：vux快速入门

配置

官方文档地址

打开后会看到一段话

该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。建议使用第三方相关组件，相关问题将不会处理。

不知道作者为啥不维护了，明明需求挺多的

我没有用演示里的加载更多组件，用的是背景常速滚动的电脑游戏里自带的使用-上拉，使用-下拉下面是我的配置

！-高度：我用到x标题了，文档里说页眉高是48px，所以这里设置成-48-Scroller使用-纸浆：纸浆-配置=' pulseedefaultconfig ' @ on-纸浆-加载=' loadMore '使用-下拉：下拉-config=' puldowddefaultconfig ' @ on-下拉-正在加载=' refresh ' lock-x ref=' Scroller bottom ' height='-48 '/Scroller脚本从' vux ' const pulldownddefault config={ content : '导入{ Scroller，XHeader }下拉刷新，高度： 40,自动刷新：假，向下内容： '下拉刷新，上转换： '释放后刷新'加载内容， '正在刷新.'，clsprefix : ' xs-plugin-下拉-' } const pullpdefaultconfig={ content : '上拉加载更多，上拉： 60,高度： 40,自动刷新：假，向下内容： '释放后加载，上转换： '上拉加载更多'加载内容， '加载中.'，clsprefix : ' xs-plugin-纸浆-' }导出默认{ components: { XHeader，Scroller }，mounted() { this .$nextTick(()={ this .参考文献。阴囊底部。reset({ top : { 0 })})、data() { return { list: []、pullupDefaultConfig:pulldownddefaultconfig : pulldownddefaultconfig } }、methods: { refresh() { }、load more(){ }/script请求接口遍历数据

接口服务用的是mock.js生成的数据，可以看一下这篇文章：使用mock.js随机数据和使用表达输出数据接口

安装爱可信

纱线添加axios/.方法： { FetchDATa(CB){ axios。get(' http://localhost :3000/').然后（响应={这个.$nextTick(()={ this .参考文献。滚动底部。reset()})CB(响应。数据)})}//.完善刷新，加载更多方法

//.方法： { refresh(){ this。fetchdata(数据={ this。列表=数据。列出这个.参考文献。阴囊底部。enablepulp纸浆()此参考文献。滚动底部。done下拉()})}，load more(){ this。fetchdata(data={ if(this。名单。长度=10){这个.参考文献。滚动底部。disable please()}这是。列表=这个。名单。concat(数据。列出)这个.参考文献。滚动底部。done pull()})} }//.在组件加载的时候调用一下加载更多方法

//.挂载(){这个.$nextTick(()={ this .参考文献。阴囊底部。重置({ top : { 0 })})此。load more()}//.最后把超文本标记语言部分补全

scroller div style=' padding : 10px 0 ' div class=' box ' v-for='(项目，索引)在列表：键='索引' p class='列表'/p/div/div/scroller中完整代码

模板div x-header : left-options=' { ' showBack ' : false } '上拉加载，下拉刷新/x-header Scroller use-pull : pull-config=' pull edefaultconfig ' @ on-pull-loading=' loadMore ' use-down : pull-config=' down defaultconfig ' @ on-pull-loading=' refresh ' lock-x ref=' Scroller bottom ' height='-48 ' div style=' padd : 10px 0 ' div class=' box ' v-for=' list ' 3:k中的(项，索引)下拉刷新，高度： 40,自动刷新：假，向下内容： '下拉刷新，上转换： '释放后刷新'加载内容， '正在刷新.clsprefix : ' xs-plugin-下拉-' } const pullpdefaultconfig={ content : '上拉加载更多，上拉： 60,高度： 40,自动刷新：假，向下内容： '释放后加载，上转换： '上拉加载更多'加载内容， '加载中.clsprefix : ' xs-plugin-纸浆-' }导出默认{ components: { XHeader，Scroller }，mounted() { this .$nextTick(()={ this .参考文献。阴囊底部。重置({ top : { 0 })})此。load more()}，data() { return { list: []，pullpdefaultconfig : pulldowndfaulttconfig，pulldownDefaultConfig:methods : { fetchData(CB){ axios。get(' http://localhost :3000/').然后（响应={这个.$nextTick(()={ this .参考文献。滚动底部。reset()})CB(响应。data)})、refresh(){ this。fetchdata(数据={ this。列表=数据。列出这个.参考文献。阴囊底部。enablepulp纸浆()此参考文献。滚动底部。done下拉()})}，load more(){ this。fetchdata(data={ if(this。名单。长度=10){这个.参考文献。滚动底部。disable please()}这是。列表=这个。名单。concat(数据。列出)这个.参考文献。滚动底部。done pull()})} } }/script style lang=' less ' .盒子{ padding: 5px 10px 5px 10px:第一个孩子{ padding: 0 10px 5px 10px } :最后一个孩子{ padd : 5px 10px 0 10px} } .列表{背景色： # fff边界半径： 4pxborder: 1px实心# f0f 0；padding: 30px }。xs插件-下拉菜单-容器{行高： 40px} .xs-plugin-纸浆容器{行高： 40px}/样式总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。