微信小程式懸浮球效果

2021-10-10 21:32:05 字數 902 閱讀 1693

class


="movable-area"


>


class


="movable-view"


x="}" y=


"}" 


direction


="all"


bindchange


="bindcmove"


bindtouchend


="moveend"


bindtap


="balltap"


>


class


="my1"


src="/image/my-1.png"


mode


="aspectfit"


hidden


="}"


/>


movable-view


>


movable-area


>
先基本展示出來懸浮球的樣式和效果

.movable-area


.movable-view


.my1
當時做了透明狀態列，避免把球滑到自定義狀態列下邊，就減去狀態列高度

獲取螢幕寬

onload


(options))}


,
做球的結束移動事件

moveend


(e)else


if(endpointright >= winwidth || endpointleft <=0)


})},
本身需要做的懸浮球效果是，需要球偏向哪邊的時候就自動划向哪邊，然後靠邊的時候半隱藏狀態。。。。

因為做到一半的時候設計圖又修改了，所以暫時只做到一半就放棄了

微信小程式 toptip效果

效果 預設2秒展示,上移動畫隱藏 展示頂部 tip 多次快速呼叫,會覆蓋前次展示 uicomponent.showtoptip function opt if typeof opt string 預設引數,也是外部參考的傳參 var defaultoptions self.setdata self....

按鈕懸浮固定在微信小程式底部

常見的有加入購物車按鈕 結算按鈕 收貨列表新增位址按鈕。以收貨位址為例，將新增位址按鈕懸浮於最底部，這樣再多的位址，也不會被遮擋而看不見。核心 如下 新增 新增位址按鈕 address add position fixed bottom 0 width 100 改用position fixed之後，...

微信小程式實現彈幕效果

主要原理是使用的css3的動畫效果。wxml class doommview wx for wx key id wx if class aon style animation first s linear forwards top color text block view class button...