小程序引入第三方UI組件(vant-2)


在vant-1中提到在.wxml中直接使用組件,需要打開node_modules文件夾找到vant-weapp中的dist文件夾拷貝到miniprogram_npm文件夾下,同時把路徑中的“path/to/”刪除,其實沒有那么麻煩,不需拷貝操作,正常的引入方式如下:

{
  "navigationBarTitleText": "音樂播放器",
  "usingComponents": {
    "van-search": "/miniprogram_npm/vant-weapp/search/index",
    "van-button": "/miniprogram_npm/vant-weapp/button/index"
  }
}

在wxml中的使用如下:

  <van-search value="{{ value }}" placeholder="請輸入搜索關鍵詞" use-action-slot bind:search="onSearch">
    <view slot="action" bind:tap="onSearch">搜索</view>
  </van-search>
  <view class='mytype'>
    <van-button plain type="primary">歌曲列表</van-button>
    <van-button plain type="default">我的最愛</van-button>
    <van-button plain type="default">搜索結果</van-button>
  </view>

效果如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM