亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

小程序如何實現自定義通用toast組件

發布時間:2021-07-05 11:33:27 來源:億速云 閱讀:283 作者:小新 欄目:web開發

這篇文章主要為大家展示了“小程序如何實現自定義通用toast組件”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“小程序如何實現自定義通用toast組件”這篇文章吧。

需求

小程序的toast僅支持在頁中展示,不能自定義位置、字體大小、在單個文本中增加icon等需求;因此自定義一個全局可通用的Toast。

效果預覽

小程序如何實現自定義通用toast組件

小程序如何實現自定義通用toast組件

小程序如何實現自定義通用toast組件

小程序如何實現自定義通用toast組件

如何使用

代碼目錄位于 /widget/toast 下,包含3個文件

  • toast.js 腳本代碼

  • toast.css 樣式文件,可以根據自己需求定制

  • toast.swan 模板結構,可以根據自己需求定制

使用步驟一:

將/widget/toast的三個文件,放在與page同名的widget文件夾中,如果項目沒有widget文件夾,就新建一個。

小程序如何實現自定義通用toast組件

使用步驟二:

在項目的整個 app.js 中引入,一次引入,所有page均可以使用:

// app.js
import { BdToast } from './widget/toast/toast.js';

App({
 BdToast, // 掛載
 onLaunch(options) {
  // do something when launch
 },
 onShow(options) {
  // do something when show
 },
 onHide() {
  // do something when hide
 }
});

使用步驟三:

在項目的app.css中引入 toast.css:

// app.css
@import "./widget/toast/toast.css";

使用步驟四:

在需要的page頁面,將模板引入:

// pages/index/index.swan
<!-- toast使用 -->
<import src="/widget/toast/toast.swan"/>
<template is="bdtoast" data="{{bdtoast}}"/>

使用步驟五

在具體的頁面進行初始化調用:

/ 初始化
new app.BdToast();

// 具體調用:
Page({
 data: {},
 onLoad() {
  new app.BdToast();
 },
 clickShowToast(e) {
  switch (+e.target.dataset.id) {
   case 1:
    this.bdtoast.toast({
     title: '僅顯示標題'
    });
    break;
   case 2:
    this.bdtoast.toast({
     title: '設置圖片+文字',
     iconSrc: '../../images/loading.gif'
    });
    break;
   case 3:
    this.bdtoast.toast({
     title: '設置時間',
     duration: 1000
    });
    break;
   case 4:
    this.bdtoast.toast({
     title: '設置標題',
     subTitle: '副標題'
    });
    break;
  }
 }
});

參數說明:

參數類型必填說明
titlestring標題
iconSrcstringicon地址,提供icon的url,icon大小為32px * 32px
subTitlestring副標題,同時需要title存在才會顯示,否則不顯示副標題
durationnumber持續時間,不填默認1500毫秒
successfunction執行成功的回調
failfunction執行失敗的回調
completefunction完成的回調,不管有沒有執行成功

以上是“小程序如何實現自定義通用toast組件”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

日喀则市| 佛冈县| 绥宁县| 水富县| 漠河县| 林甸县| 青川县| 蓬莱市| 微博| 冷水江市| 吉林省| 全州县| 娱乐| 深州市| 万安县| 碌曲县| 广水市| 五峰| 长白| 南汇区| 荣昌县| 重庆市| 翁牛特旗| 嘉兴市| 灯塔市| 团风县| 平度市| 巢湖市| 绥滨县| 鲁甸县| 怀集县| 义乌市| 库车县| 珠海市| 交口县| 洛浦县| 仙桃市| 开鲁县| 泸州市| 朔州市| 许昌县|