如何使用小程序?qū)崿F(xiàn)基本的切換動畫

發(fā)布時間：2021-03-10 15:48:29 來源：億速云閱讀：773 作者：小新欄目：移動開發(fā)

小編給大家分享一下如何使用小程序?qū)崿F(xiàn)基本的切換動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、什么是微信小程序？

　　小程序在我的理解中只是高度封裝的H5，封裝了各種組件。根據(jù)官方的說法小程序運行不是在瀏覽器當中。姑且算是微信的插件吧。

二、小程序不能操縱DOM

　　小程序不能直接操縱DOM，鼓勵的是數(shù)據(jù)綁定。例如vue.js這種。所以個人而言感覺跟如果習(xí)慣了用JQ去操縱DOM的開發(fā)者很不習(xí)慣。需要一個習(xí)慣的過程。

三、小程序不能引用JQ

　　小程序雖然可以引用外部JS。但是我一引用就出現(xiàn)異常?？赡苄枰右孕薷牟拍苁褂?。我心想既然都做小程序了。不如按小程序的那一套走吧。所以就看小程序的API來走了。

四、使用小程序?qū)崿F(xiàn)基本的切換動畫

　　　 html代碼

　　　 js代碼

從上面的代碼我們可以看到，我分別用了checkCodeBtnOpacity,checkCodeOpacity控制了兩個塊的透明度。用于隱藏。

用animationData保存動畫數(shù)據(jù)。

然后給bindGetCheckCode綁定了一個click事件。

然后調(diào)用了微信的API wx.createAnimation ，然后調(diào)用了opacity(1)來顯示，然后調(diào)用translateY(-100)Y軸平移來做一個上升的效果。

接著調(diào)用this.setData()來改動數(shù)據(jù)源。切換動畫完成。

以上是“如何使用小程序?qū)崿F(xiàn)基本的切換動畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

猜你喜歡