抖音小程序使用Vant

安裝

Vant 有針對小程序的版本,通過npm安裝:

npm i @vant/weapp -S --production

構建 npm

安裝 Vant Weapp 后需要構建 NPM,在菜單的【工具】選項中選擇【構建 NPM】:

在這里插入圖片描述

使用組件

抖音小程序和微信小程序還是有一些差別的,在抖音小程序中要用 Vant 組件,需要使用絕對路徑引入,在你需要使用組件的頁面 .json 文件中引用:

{"usingComponents": {"van-button": "../../miniprogram_npm/@vant/weapp/button/index","van-calendar": "../../miniprogram_npm/@vant/weapp/calendar/index","van-dialog": "../../miniprogram_npm/@vant/weapp/dialog/index"}
}

引用組件樣式

在要使用組件的頁面 .ttss 文件引入相應的組件樣式:

@import '../../miniprogram_npm/@vant/weapp/calendar/index';
@import '../../miniprogram_npm/@vant/weapp/overlay/index';
@import '../../miniprogram_npm/@vant/weapp/dialog/index';

這里有個小細節:在使用彈框等帶有蒙層的組件時,需要在樣式文件中引用 Vant 的 overlay 組件樣式,否則是沒有蒙層的

使用問題

Vant Weapp 中一些組件使用了微信的 wx.nextTick 方法,如 dialog 組件,這時直接使用會發現報錯。
需要到 node_modules > @vant > weapp > lib 目錄下的對應組件 js 文件中將 wx.nextTick 方法替換成 setTimeout 方法。
dialog 組件:

在這里插入圖片描述

修改完成后需要重新構建NPM,之后再使用就沒問題了。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/12917.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12917.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/12917.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

怎么把3d模型導出cad立面---模大獅模型網

在設計工作中,將3D模型導出到CAD軟件并生成立面圖是一項常見但關鍵的任務。這不僅有助于更好地展示設計方案,還能方便后續的工程制圖和施工。本文將介紹如何通過3ds Max軟件將3D模型導出到CAD軟件,并生成高質量的立面圖,為您提供實…

現貨正泰漏電小型斷路器NXB-32LE-C16 30MA1P+N原裝正品NXB-40L

品牌:CHNT/正泰 型號:NXBLE 額定電流:25A,16A,20A,40A,32A 漏電保護器類型:2P 產地:中國大陸 電壓:1000V及以下 極數:3P,4p,2P,1PN 電源方式:交流電 3C證書編號:…

大模型時代下的先行者:景聯文科技引領數據標注新時代

在大模型時代,數據標注不再是簡單的分類標注,而是一項融合了技術革新、專業技能、法律合規和精細化管理的綜合性任務,對推動AI技術的發展和落地應用具有重要意義。 景聯文科技作為AI基礎行業的數據供應商,可協助人工智能企業解決整…

easyx快速入門1

1.基本說明 EasyX 是針對 C 的圖形庫,可以幫助 C/C 初學者快速上手圖形和游戲編程。 比如,可以基于 EasyX 圖形庫很快的用幾何圖形畫一個房子,或者一輛移動的小車,可以編寫俄羅斯方塊、貪吃蛇、黑白棋等小游戲,可以練…

fl studio試用版文件保存無法打開??一個方法教你免費打開!

前言 當下,各款編曲軟件五花八門,而這其中最有聲譽的必為FL Studio莫屬 這個軟件呢國人習慣叫他水果,擁有強大的錄音、編曲、混音等功能,所以廣受音樂圈歡迎。如今,大部分水果一旦有編曲所需,一般都要使用…

【Python快速上手(二十三)】

目錄 Python快速上手(二十三)Python3 多線程1. 線程的創建2. 線程同步2.1 鎖(Lock)2.2 信號量(Semaphore)2.3 事件(Event)2.4 條件(Condition) 3. 線程優先級…

【Linux】Centos9設置ActiveMq開機自啟功能

配置流程: 1. 創建 Systemd 服務文件。這個文件通常存放在/usr/lib/systemd/system/目錄下,命名為 activemq.service。 #先創建文件,然后編輯: sudo touch /usr/lib/systemd/system/activemq.service sudo vim /usr/lib/systemd…

CSS 根據子元素選擇父元素,并設置父元素的樣式

場景舉例&#xff1a;當子元素有增加了一個class時&#xff0c;需要影響其父元素的樣式 可以使用":has"偽類來實現選擇父元素的效果 <style>.parent:has(.child){background-color: #eee;}p{width:100px;border:1px solid #000;} </style> <body>…

Python3 筆記:for語句和while語句的區別

一般來說&#xff0c;循環次數確定的問題使用for循環或者while循環都可以解決&#xff0c;而循環次數不確定的問題只能使用while循環解決。 for語句的格式&#xff1a; for 循環變量 in 遍歷對象: 語句 while語句的格式&#xff1a; while 條件表達式: 循環體 for…

人機協同中的比較、調整與反轉

人機協同是指人與機器之間的合作關系&#xff0c;通過共同努力實現特定任務的目標。在人機協同中&#xff0c;存在著比較與調整的過程&#xff0c;這是為了實現更好的合作效果和任務完成質量。 比較是指人與機器在任務執行過程中對彼此的表現進行評估和比較。這可以通過對機器的…

DB類的學習

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; //引用三個命名空間 using System.Data.SqlClient; using System.Configuration;/// <summary> /// DB 的摘要說明 /// </summary> public class DB {p…

vue+ts+vite+pinia+less+echarts 前端可視化 實戰項目

1.初始化前端 輸入 npm init vuelatest 命令 然后 選擇需要的插件2.構建完成后 在終端切換到vue-project文件夾下 npm install 下載依賴 3.下載 less樣式 npm install less less-loader -D 4.下載axios npm install axios 5.下載echarts npm install echarts -S 6.引入中國…

JAVA 的數據類型

Java 是一種靜態類型語言&#xff0c;這意味著在編譯時&#xff0c;變量必須聲明其數據類型。在 Java 中&#xff0c;數據類型可以分為兩大類&#xff1a;基本數據類型&#xff08;又稱原始數據類型&#xff09;和引用數據類型。本文將詳細介紹這兩種數據類型。 一、基本數據類…

戰網國際服加速器用哪個好 暴雪戰網好用加速器介紹

戰網國際版&#xff0c;又稱Battle.net環球版&#xff0c;是暴雪娛樂操盤的全球性游戲互動平臺&#xff0c;它跨越地理界限&#xff0c;服務于全球游戲愛好者。與地區限定版本相異&#xff0c;國際版賦予玩家自由進入暴雪旗下眾多經典游戲的權利&#xff0c;無論身處何方&#…

對比測評3款BI分析工具

前不久&#xff0c;一位準備入職阿里的學弟問我&#xff0c;他要做電商數據分析&#xff0c;電商有龐雜的標簽、模型、數據和業務邏輯&#xff0c;菜鳥應該要具備什么樣的分析能力啊&#xff1f; 我看了他的崗位職責&#xff0c;主要是負責經營決策支持、專題分析和數據看板搭…

leetcode-字符串變形-104

題目要求 思路 1.首先根據ASCII的規則&#xff0c;把字符串大小寫替換&#xff0c;空格保持不變 2.將整個字符串進行翻轉 3.以空格為區間&#xff0c;將區間內的字符串進行翻轉&#xff0c;其中翻轉的函數reverse() 代碼實現 class Solution { public:string trans(string s…

【C語言】通訊錄系統實現

目錄 1、通訊錄系統介紹 2、代碼分裝 3、代碼實現步驟 3.1制作菜單函數以及游戲運行邏輯流程 3.2、封裝人的信息PeoInfo以及通訊錄Contact結構體類型 3.3、初始化通訊錄InitContact函數 3.4、增加聯系人AddContact函數 3.5、顯示所有聯系人ShowContact函數 3.6、刪除聯系人D…

Shell之常用命令

目錄 1.排序工具--sort命令 1.1 快讀查找一個目錄中最大文件 2.去重工具--uniq命令 2.1 分析判斷遠程登錄錯誤次數&#xff0c;禁止該用戶遠程登錄 3.修改工具--tr命令 4.列截取工具--cut命令 5.分割文件工具--split命令 6.合并文件列--paste命令 7.掃描工具--eval命令…

OpenAI和互聯網行業的發展,有著異曲同工之處

當OpenAI首席技術官米拉穆拉提發布桌面版本的ChatGPT和新的旗艦模型—GPT-4o&#xff0c;OpenAI的發展&#xff0c;進入到了一個真正意義上的奇點時刻。 OpenAI的短短26分鐘的發布會&#xff0c;卻依然引發了不少波瀾。 無論是ChatGPT-4o的完全免費&#xff0c;抑或是推出PC桌…

【Linux】常用指令、熱鍵與權限管理

一、常用指令 &#xff08;1&#xff09;ls 功能&#xff1a;列出指定目錄下的所有子目錄與文件 用法&#xff1a;ls &#xff08;選項&#xff09; &#xff08;目錄或文件名&#xff09; 常用選項&#xff1a; -a&#xff1a;列出目錄下的所有文件&#xff0c;包括隱藏…