vue 移动端加载更多分页组件_基于京东风格的移动端Vue组件库来了

最新推荐文章于 2024-06-27 20:13:46 发布
最新推荐文章于 2024-06-27 20:13:46 发布
阅读量310 收藏
点赞数
文章标签： vue 移动端加载更多分页组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28972529/article/details/112271700
版权
前言

京东物流目前在 M 端的业务越来越多，如公众号、移动官网。这对 M 端的 UI 框架要求就越高，组件丰富、接入友好，稳定性高，拓展性及性能上都有较高的要求。自研的 pandora-mobile 目前看不符合现有需求，相较而言 NutUI 更适合物流侧的业务研发需求，经内部讨论决定协同物流侧用户体验部联合 NutUI 团队打造出物流视觉规范的 M 端 UI 框架。

JDC & 京东物流技术发展部团队经历了为期一个多月的紧密合作开发迭代，NutUI-JDL 终于和大家见面了。作为继 2019 年 1 月 15 日 NutUI 2.0 正式发布以来的第二次大版本发布，NutUI-JDL 仍坚守着【基于京东风格】同时在产品的功能、体验、易用性和灵活性等各个方面进行了全面提升。

需要注意的是，NutUI-JDL 版本是 NutUI 中的一个生态，目前我们两个生态(NutUI、NutUI-JDL)会同时更新维护，发现问题我们还是保持第一时间迭代修复，请大家放心使用。

目标

NutUI-JDL 的目标是让移动端的开发更加容易，基础组件交给我们让开发人员更加专注于业务，提升研发效率。

特点

  • 物流风格

  • 体验极致

  • 标准规范

  • 扩展性强

设计语言升级

呼声最高的设计资源对外开放，并且引入优质的相关技术沉淀文章

384c05ea1de07695993f7afc6ff35bac.png

4e5eaa2befbc8150c2340bd6d05b5cca.png

  • 随着京东物流移动端业务的拓展，设计师不仅仅需要完成业务需求，也需要思考设计的价值。设计师也不应该陷入重复的设计中，消耗设计时间，降低工作效率，所以推行组件化的设计模式迫在眉睫。

  • NutUI-JDL 京东物流版是一套基于移动端的组件库，减少冗余组件，从实际项目入手，梳理出最通用的 30+ 基础组件，覆盖多场景，体积小巧、设计精美，提供了全新的设计以及交互体验，提高界面模块化的通用程度。

  • 新版组件库从 设计语言 和 基础组件 两大模块，重新定义了布局、颜色、图标、字体、间距和通用组件规范，提升了 UI 展示及交互方式，建立了新的设计标准，为推动物流侧移动端产品的体验优化和迭代带来了高效路径。

更小的体积

在 NutUI v2.2.6 之前，因底层的 WebPack 配置老旧、版本较低、设计不足 这大大增加了造成构建出的 npm 包大小达到了 17.4 MB， 2020Q2 通过我们不断打磨 @nutui/cli 接入后，将 npm 包大小减少到了 7.58 MB，大幅提升了性能及可配置项。同样我们在 NutUI-JDL 版本中也统一此插件。

新组件

  • Field 输入框(将原来 Input、TextBox 融为一体，灵活配置)

  • ImagePreview 图片预览(支持滑动左右切换)

  • Steps 步骤条(丰富多样的步骤条)

  • Card 卡片(全新的卡片组件)

  • Scroll 下拉刷新上拉加载(单独抽离，降低耦合性)

组件重构升级 30+

  • Menu

  • Toast

  • ActionSheet

  • Dialog

  • Cell

  • Skeleton

  • Popup

  • Rate

  • NoticeBar

  • Tag

  • Badge

  • TabBar

  • SideNavBar

  • NavBar

  • Tabs

  • Avator

  • LeftSlip

  • Switch

  • Stepper

  • Calendar

  • Picker

  • Uploader

a05533131c67592ed1c4c81ad9eb4611.png

3e84b769da6629e14e4d28ae3e148680.png

95a6b58da2cb23974cc34aabde76fe6b.png

89ab36cb6124be2dc08f2dd00acfbf7e.png

如何使用

本次版本 NutUI-JDL 与 NutUI 2.x 属于不同生态，一个是基于 JD APP 视觉规范、另一个是 JDL APP 视觉规范，对应的 npm 包分别是 @nutui/nutui 和 @nutui/nutui-jdl 我们建议您为了尽可能简化升级，直接采用以下命令进行安装使用：

npm install @nutui/nutui-jdl -S

详细的使用文档请参考 https://nutui.jd.com/jdl/#/start

后期规划

  • 四级地址级联组件

  • 图片懒加载(Lazy Load)

  • 手风琴

开源共建

众人拾柴火焰高，在这里我们非常欢迎感兴趣的同学参与到 NutUI 项目的开发，建议通过提 Pull Request 的方式参与，通过 Code Review 之后，我们会合并你的代码。

以上

NutUI 的持续迭代，离不开每一位参与帮助开发的人，开发者每一次对我们的认可，就是对我们最大的鼓励。

荣耀张大仙mk~~
关注
基于SpringCloud+vue+element设计的手机端网络购物商城
02-13 1047
本系统利用springboot和mysql技术作为系统的后台，利用vue技术和element ui 搭建系统的前台。前台包括用户前台页面和后台管理页面。 用户前台页面必须满足用户购物的需求，要有购物车、订单、下单和收藏等功能。系统后台管理页面需要对店铺的商品、用户和订单进行管理，同时需要统计店铺的各种销量数据等等。通过本系统可以解决用户可以通过移动互联网不用安装移动应用进行网上购物，同时满足了商家拓展线上销售的渠道。
教你如何实现一个完美的移动端瀑布流组件（附源码）
大转转FE
04-14 2610
背景瀑布流是大家日常开发过程中经常遇到的一个场景，我们公司内部的组件库中也提供了一些解决方案。但这些方案适用场景都很单一，且每个实现方案都或多或少存在一些问题，基于此，我们设计与开发了一个兼容多场景的瀑布流组件。目前转转展示商品流时会采用三种布局方式：分别是卡片流、固定式瀑布流、交错式瀑布流。其中卡片流以一个下拉列表的形式呈现。这种布局可以让用户专注于单个列表项，有利于阅...
vue 移动端 简单分页组件
hflxia的博客
07-23 1217
分页组件：pagination.vue <template> <div class="pagination"> <div class="page" v-if="totalPage>0"> <span :class="page==1 || totalPage==0?'undis':''" @click="changePage('pev'...
vue 移动端加载更多分页组件_移动端分页vue
weixin_36028920的博客
12-30 511
content="width=320, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">618年中大促 6535资料审核成功 6535资料审核成功 6535资料审核成功 6535资料审核成功.bgmian{width: 25%;float: left;}.bgmian div{width: ...
移动端上下滚动版级联选择器原生js实现 超详细
最新发布
2301_78320134的博客
06-27 239
vue2的移动端 上下滚动版级联选择器 原生js实现 里面html css rem像素配置 都有 初学者小白可以看看 ，好处：粘走直接用
vue 移动端加载更多分页组件_vue中移动端分页组件pagination
weixin_29867607的博客
12-30 548
上一页上一页{{item}}下一页下一页共{{allPage}}页exportdefault{name:'pagination',props: {currentPage: {//当前第几页type: Number,default: 1},allPage: {//总页数type: Number,default: 5},showIndex: {//中间显示几个页数，要为奇数type: Number,d...
基于vue2.0的分页组件
NRGAGA的专栏
09-14 798
自制组件： 1、https://www.cnblogs.com/cqsjs/p/5772834.html?utm_source=itdadao&amp;utm_medium=referral 2.1、https://blog.csdn.net/yiershan1314/article/details/62215505 2.2、https://blog.csdn.net/yiershan131...
vue 移动端点击事件_京东风格的移动端Vue组件库NutUI，支持服务器端渲染
weixin_39856055的博客
11-27 206
介绍NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。支持服务器端渲染(SSR)。相关地址github：https://github.com/jdf2e/nutui官网: https://nutui.jd.com/#/index具备特性(来自官方文档)跨平台，自动转微信小程序组件(稍后上线，敬请期待)30+ 京东移动端项目正在使用基于京东APP 7.0 ...
Vue基础6天实施笔记
weixin_44867717的博客
02-09 1927
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
kesjc2017的博客
03-12 3844
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 【导读】：初学web前端的小伙伴经常会遇到的问题，1.没方法2.没资源3.没经验，不知道从何开始 ，代码哥（DaiMaGe3）之前也是从新手过来的，很能理解web前端新手的难处，为了更好的帮助大家自学好web前端开发，我把自己精心梳理的web自学资料、心得及完整的web前端学习路线，统统都分享出来，希望对有需要的朋友有所帮助！ 【大纲】： 1.为什么要学web前端开发？ 2.哪些人可以学web前端开发？ ..
mobile-select：手机移动端选择组件支持是否级联单选到多选可逆变更新数据等。
02-19
移动选择 多功能手机滚动选择器，支持单选多选，支持多级层叠，提供自定义回叫功能，提供更新功能重画，重定位功能，兼容的PC拖动等。 特征 具有本机js的手机选择组件，不依赖任何库 可以传递给普通数组或json数组 根据传递的参数长度，自动渲染相应的列数，支持单个到多个选项 自动识别是级联的 选择成功后，提供一个自定义的回调函数callback（） 每个手势滑动之后，它还提供了一个回调函数transitionEnd（） 提供update（）函数，传递其他参数再次渲染 提供搬迁功能 预览 使用手机扫描代码进行预览： Gif预览： 安装 方法1标签导入： < link rel =" stylesheet " type =" text/css " href =" css/mobileSelect.css " /> < script src =" js/mobileSelect.js " ty
如何封装了一个vue移动端下拉加载下一页数据的组件
10-17
主要介绍了如何封装了一个vue移动端下拉加载下一页数据的组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
mobile-select:移动端选择组件，支持级联（类似省市区）与非级联
05-19
mobile-select 移动端选择组件，支持级联（类似省市区）与非级联 引入 由于组件用到了modernizr的prefixed功能，所以需要引入modernizr.js <link rel="stylesheet" href="index.css"> [removed][removed] [removed][removed] 使用 var select = new MobileSelect({ title: '请选择', data: function () { var num = 3; function deep() { var index = arguments[0] || 0,
移动端1到6级多级联动
02-19
0依赖，只需引用一个js和css即可 样式可自己定制，也可使用默认样式 一个页面同时实例化多个组件 jquery zepto vue 均适用 支持最多6级级联 支持设置高度和高度单位 适用于android和iOS设备(PC端支持IE9+，不过PC端上滑动体验不太实用)
vue移动端城市三级联动组件使用详解
10-16
主要为大家详细介绍了vue移动端城市三级联动组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue中的数据分页与分页组件设计
IT徐师兄
10-02 1601
数据分页是将一组数据分成多个页面，每个页面包含一部分数据的过程。通常，我们会在前端页面上显示一定数量的数据，而不是一次性加载所有数据，这可以提高页面加载性能和用户体验。每页数据量（pageSize）：每个分页显示的数据条数。当前页（currentPage）：用户当前正在查看的页面。总页数（totalPages）：数据分成多少页。总数据量（totalItems）：所有数据的总数量。在Vue中进行数据分页是一个常见的需求，它可以通过计算属性和组件封装来实现。
vue mint-ui 实现省市区街道4级联动（仿淘宝京东收货地址4级联动）
weixin_30535565的博客
06-25 925
demo及源码地址https://github.com/artiely/citypicker 先去下载一个“省份、城市、区县、乡镇” 四级联动数据，然后 引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker); 组件使用 ...
手机添加收货地址页面模板
billhepeng的专栏
10-24 1916
下载地址:https://download.csdn.net/download/billhepeng/11913829 来源于网络:https://www.17sucai.com
Vue移动端下拉加载组件封装实战
"本文将介绍如何在Vue.js移动端应用中封装一个实现下拉加载下一页数据的组件。这个组件能够帮助开发者实现无限滚动效果，提高用户体验。" 在Vue.js开发移动应用时，为了提供更好的用户体验，通常需要实现下拉加载更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值