元件wxml頁面**如下
='shade' hidden=
'}'>
<
/view>
='shade_box popup }' hidden=
'}'>
='content'
>
}<
/view>
<
!-- 內容 --
>
'min-height:100rpx;'
>
}<
/view>
='bottom-btn'
>
'_hideevent' wx:if=
'}'>
}<
/view>
//這一塊是因為有時候彈框可能只需要乙個按鈕，
'_confirmevent'
>
}<
/view>
<
/view>
<
/view>
/* pages/middleanimation/middleanimation.wxss */
/* 遮罩 */
.shade
.shade_box
.frameanimate
@keyframes popup
to }/* 當前彈窗樣式 */
.popup
.popup .content
.bottom-btn
.bottom-btn view
// component/frameanimation/frameanimation.js
component(,
title:
, cancelbtn:
, confirmbtn:},
/** * 元件的初始資料
*/data:
,/**
* 元件的方法列表
*/methods:)}
,hideframe()
)},_confirmevent()
,_hideevent()}})
'margin:20rpx 50rpx;'
>
'primary' bindtap=
'showpopup2'
>開啟彈窗<
/button>
<
/view>
'margin:20rpx 50rpx;'
>
'primary' bindtap=
'showpopup3'
>開啟彈窗2
<
/button>
<
/view>
'frameanimation'
content=
'' title=
'動畫'
cancelbtn=
'取消'
bind:confirmevent=
'_confirmevent'
bind:hideevent=
'_hideevent'
>
<
/frameanimation>
'frameanimation1'
content=
'撥打司機**，聯絡司機'
title=
'動畫'
bind:confirmevent=
'_confirmevent1'
bind:hideevent=
'_hideevent1'
>
<
/frameanimation>
// 以下部分是有動畫的彈框方法
showpopup2:
function()
,// 以下部分是有動畫的彈框方法
showpopup3:
function()
,// 公用彈框確認方法
_confirmevent:
function()
, _hideevent:
function()
, _confirmevent1:
function()
, _hideevent1:
function()
,
小程式自定義TabBar
tabbar requiredbackgroundmodes audio location debug true,sitemaplocation sitemap.json 查資料發現，tabbar的list下的第一項的路徑必須對應於pages配置下的第乙個頁面。因此，將tabbar中list的第乙個...
小程式自定義Tabbar
最近我司改版小程式主頁，個性化了tabbar欄，功能如下 1 預設首頁顯示大圖示，滾動到一定位置，顯示gotop圖示，點選可返回頂部 滑動到頂部也可還原圖示 還原圖示 2 其他tabbar頁類似 在此簡單做個記錄 tabbar 3 在components資料夾內新增自定義custom tab bar...
小程式自定義星星評價
在專案中需要用到五星評價，但是找的元件都是只能點亮半顆星 或者一顆星星，不能實現3.7,4.2這樣的評分，而且此需求不能改。所以就自己琢磨了乙個方法。效果如下 思路如下 每個小星星都是乙個正方形，中間是透明的，然後無間隙排在一起放在乙個父盒子裡。父盒子高和星星一樣高，寬，根據實際評分來動態實現，最寬...