一、概述

今天在優(yōu)化小程序的列表時(shí)候，想要把原生的 scroll-view 組件替換成一個(gè)下拉刷新的組件，然后就找了一下，果然有大神已經(jīng)封裝好。coolui-scroller 就是這樣滿足需求的一款插件，但是微信官網(wǎng)給出的描述以及安裝引入的方式，會(huì)造成依賴安裝失敗，報(bào)錯(cuò)：構(gòu)建npm提示錯(cuò)誤，未找到[1.06.2209190][win32-x64]？。

數(shù)字化管理平臺(tái)
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
個(gè)人博客地址

試了幾次，都說(shuō)找不到這個(gè)插件。所以嘗試著去找這個(gè)官網(wǎng)最新的資料，終于發(fā)現(xiàn)是做了更新，這里提前給大家踩坑了。項(xiàng)目開發(fā)的過程中，一定要注意版本的問題，否則很容易造成引入依賴失敗，而這種問題又比較隱蔽。

github 地址

可以通過 git clone 將代碼下載到本地，使用微信開發(fā)者工具查看

git clone -b demo  https://github.com/wzs28150/coolui-scroller.git

指導(dǎo)手冊(cè)地址

二、最新的使用步驟：

1. 安裝

   npm i coolui-scroller --production
   

   完成后，如下圖則安裝成功
   

2. 開始 npm 構(gòu)建成小程序使用的依賴包

   開發(fā)者工具 -> 工具 -> 構(gòu)建npm
   
   構(gòu)建完成后，在項(xiàng)目根目錄下生成 miniprogram_npm 文件夾，打開查看依賴構(gòu)建情況
   

3. 引入插件
   在全局的 app.json 或者 當(dāng)前頁(yè)面的 index.json 中引入組件

   "usingComponents": {
     "scroller": "coolui-scroller/scroller/index"
   }
   

4. 頁(yè)面中使用

   <scroller class="my-scroller"> </scroller>
   

5. 相關(guān)配置參數(shù)
   在對(duì)應(yīng)頁(yè)面腳本的 data 中進(jìn)行配置參數(shù)設(shè)置，如下列出部分配置

   

6. 插件中涵蓋的組件
   插件中含有多個(gè)組件，根據(jù)自己的需要進(jìn)行搭配使用
   

7. Scroller 滾動(dòng)組件
   Scroller 為 coolui-scroller 的地基。所以要使用 coolui-scroller 必須引入該組件。該組件將列表頁(yè)面查分成如下各個(gè)區(qū)域:
   
   每個(gè)區(qū)域都提供了相應(yīng)的組件或支持自定義。 如開啟回到頂部按鈕。該按鈕默認(rèn)執(zhí)行 refresh 下拉的方法。

三、代碼展示

1. wxml 代碼：

   <scroller
     background="{{background}}"
     isBackBtn="{{isBackBtn}}"
     isEmpty="{{isEmpty}}"
     bind:loadmore="loadmore"
     bind:refresh="refresh"
   >
     <view slot="header">
       <!-- 頭部區(qū)域，可增加搜索，分類切換等功能 -->
     </view>
     <!-- 下拉刷新組件，如果調(diào)用則開啟下拉，不調(diào)用則不開啟下拉，下拉配置詳見下拉組件 -->
     <refresh slot="refresh" type="base" config="" />
   
     <!-- 中間列表內(nèi)容區(qū)域，可使用長(zhǎng)列表分頁(yè)組件、列表項(xiàng)組件或自定義 -->
     <item wx:for="{{list}}">
       <!-- 我是列表項(xiàng) -->
     </item>
     <view slot="loadmore">
       <!-- 加載更多區(qū)域，可使用加載更多組件或自定義 -->
     </view>
     <view slot="empty">
       <!-- 空列表區(qū)域，數(shù)據(jù)為空，將isEmpty設(shè)置為true時(shí)顯示，可使用空組件或自定義 -->
     </view>
   </scroller>
   

2. .js 代碼：

   Page({
     data: {
       background: '#f2f2f2',
       isBackBtn: true, // 設(shè)置是否顯示回到頂部按鈕
       isEmpty: false, // 設(shè)置是否為空數(shù)據(jù)
       list: [], // 列表數(shù)據(jù)
     },
     loadmore() {
       // 上拉到底部，加載更多時(shí)執(zhí)行，請(qǐng)實(shí)現(xiàn)分頁(yè)+1，新數(shù)據(jù)加載的操作
     },
     refresh() {
       // 下拉到頂部，下拉刷新時(shí)執(zhí)行，請(qǐng)實(shí)現(xiàn)清除列表數(shù)據(jù)，還原分頁(yè)為初始值的操作
     },
   })
   

插件使用暫時(shí)介紹到這里了

四、說(shuō)下構(gòu)建過程遇到的錯(cuò)誤：未找到 [1.06.2210141][win32-x64]錯(cuò)誤

原因： 我在使用 Vant weapp 框架的時(shí)候，按照版本號(hào) v1 進(jìn)行配置，而開發(fā)者工具在這期間更新了好幾個(gè)版本，造成路徑下找不到需要的插件，現(xiàn)在裝了其它插件，需要修改這個(gè)目錄為 ./

注：新版開發(fā)者工具 npm 構(gòu)建的文件目錄為 miniprogram_npm，且開發(fā)工具會(huì)默認(rèn)在當(dāng)前目錄下創(chuàng)建 miniprogram_npm 的文件名，不需要再額外指定。

找到 project.config.json 文件

"setting": {
        "packNpmManually": true,
        "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./miniprogram"
            }
        ],
    },

改成文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-476996.html

"setting": {
        "packNpmManually": true,
        "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./"
            }
        ],
    },

到了這里，關(guān)于【微信小程序插件】下拉刷新、下拉加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！