更新记录

v1.0.0(2023-11-27)

(2023.11.26): v1.0.0 - 初步实现核心方案


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.0 app-nvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

nvue 开发的高性能索引列表页

外加 python 脚本,可自动生成一套“索引列表页”及相关逻辑的自动化脚本

  • 【若项目中没试过这么玩,期待各位开发伙伴的尝试一下】
  • 【只开发了原生版,不兼容web,所以大家调试时一定要在虚拟机或真机上运行】

支持1000条数据不卡顿的nvue索引列表组件以及其他额外组件(Layout、AppNavbar等)

  • [注]:kl-py-nv-index-list 只是个空组件,只是为了方便提交组件到插件市场,真正的索引组件代码在 components/contract-indexed-list/ ,下载完整案例代码即可复制,我只是不想把组件名称命名那么奇怪,还加前缀啥的
  • 本项目中,这个 kl-py-nv-index-list 空组件只是根引线,希望有需要的伙伴一定要下载 Demo,查看完整的代码,根据案例代码,然后提取自己真正需要的部分进行使用
  • 真正的 索引列表页 组件在 components/contract-indexed-list/ 中,以及 components/目录下的其他组件,都可以一起使用,请一定要下载案例代码
  • 项目中除了这个 contract-indexed-list 比较关键之外,【更希望】开发伙伴能看下 【/py-templates/】 中的python脚本,此脚本执行后会根据用户的输入信息,自动生成一套“索引列表页”及相关逻辑脚本的,
# 进入 kl-py-nv-index-list/py-templates/ 目录下
cd py-templates
# 执行自动化脚本试试吧
py .\py-indexlist-page-creator.py
上面执行脚本后,可以先使用下面的案例参数,在终端根据提示输入下看看效果:
'索引页案例': {
        "page_route": '/pages/demoIndexList/index',
        "page_title": '索引页案例',
        "next_page_route": '/pages/demo/index'
    }
    菜单的图片参数的: icon = "自己网上找一个图片url或者,或者网上找一个在线工具把图片转成base64,然后复制过来输入到终端即可"

案例代码

  • 【注】:这些代码在该项目中,可通过 /py-templates/ 下的 python 脚本自动生成
  • 若你下载了完整的案例代码,并尝试,会感受到一键生成一整套模板页以及相关业务模板代码的快感
    # ------------------------------------------------------------
    # 备注:
    # 该自动生成脚本涉及到的目录和文件如下:
    # ../pages/home/preRequest/modules -- 预处理数据的 js 脚本
    # ../pages/home/preRequest/preloadRoutes.js -- 每次生成一个索引页模块都会在此追加相应的路由变量和预处理数据的存储变量
    # ../pages/xxxx/* -- 除了 pages/home/ 这个目录外,如当前已存在的demo:pages/customerManageIndexedList/* 这个目录以及其中的所有组件,都是自动生成的索引页和相关组件
    # ../pages/home/menu-list-data.js  -- 每当生成一个索引页模块后,都会在这里新增一个菜单数据,即展示在主页面的菜单
    # ------------------------------------------------------------
    
    <template>
    <DefaultLayout @layoutStyleInit="handleLayoutStyle">
        <popMenu :isShow="menuPopDisplay" :top="menuPopTop" :right="4" :list="popList" @tapMenu="handlePopMenuTap">
            <template v-slot:default="{ menuitem }">
                <PopmenuItem :item="menuitem"></PopmenuItem>
            </template>
        </popMenu>
        <AppCommNav @tapLeft="handleAppBack()">
            <template slot="right-slot">
                <AppCommActions :disabled="loading" :styles="{ 'actions-area': 'height:85rpx;' }"
                    @actionTap="handleAppActionTap"></AppCommActions>
            </template>
            <template slot='bottom-slot'>
                <AppCommSearch :disabled="loading" :search.sync="searchValue" />
            </template>
        </AppCommNav>
        <PickerDrawer :styles="yearPickerStyles" :visible.sync="yearsPickerDisplay" @reset="handlePickerReset()"
            @confirm="handlePickerConfirm()">
            <YearFilterPannel ref="yearFilterEl" :defaultYear="year"></YearFilterPannel>
        </PickerDrawer>
        <ContractIndexedList :initFastRender.sync="initFastRender" :search="searchValue" :list="list" :styles="indexedListStyles" nameKey="name"
            descKey="content" imgKey="imgurl" @infoAreaTap="handleListItemInfoAreaTap">
        </ContractIndexedList>
    </DefaultLayout>
    </template>
{ this.yearsPickerDisplay = false }, 0) }, handleListItemInfoAreaTap(card) { this.setMenuPopDisplay(false) const year = this.year // 跳转到下一页面 const url = `/pages/customerManage/index?id=${card.id}&name=${encodeURI(card.name)}&year=${year}` uni.navigateTo({ url }) } } }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问