微信小程序?qū)崿F(xiàn)文字無限輪播效果
更新時(shí)間:2018年12月28日 09:20:28 作者:小菜雞一mei
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字無限輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)文字無限輪播展示的具體代碼,供大家參考,具體內(nèi)容如下
.JS文件 onLoad中添加下列代碼
var self = this; var width = wx.getSystemInfoSync().screenWidth; function carousel_num() { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 5000, timingFunction: "linear", delay: 0 }) self.animation = animation animation.translate3d(-width, 0, 100).step() console.log("第一動畫開始"); self.setData({ animationData_notice: animation.export(), }) setTimeout(function () { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 0, timingFunction: "linear", delay: 0 }) self.animation = animation animation.translate3d(0, 0, 100).step() console.log("第二動畫開始"); self.setData({ animationData_notice: animation.export(), }) setTimeout(function () { carousel_num(); }, 50) }, 5000) } setTimeout(function () { carousel_num(); }, 100);
.WXML文件 添加如下:
<scroll-view class='scroll_notice'> <view class='scroll_notice_item_bg' animation="{{animationData_notice}}"> <view class="scroll_notice_item_bg"> <image class='scroll_notice_item_image' src='圖片鏈接'></image> <view class='scroll_notice_item'>全國快遞本月底將陸續(xù)停運(yùn),各位請注意補(bǔ)貨時(shí)間!</view> </view> <view class="scroll_notice_item_bg"> <image class='scroll_notice_item_image' src='圖片鏈接'></image> <view class='scroll_notice_item'>全國快遞本月底將陸續(xù)停運(yùn),各位請注意補(bǔ)貨時(shí)間!</view> </view> </view> </scroll-view>
.WXSS文件 添加如下:
.scroll_notice { position: absolute; left: 0px; top: 0px; width: 100%; white-space: nowrap; height: 65rpx; background-color: #e6513e; } .scroll_notice_item_image { position: absolute; left: 0px; top: 14rpx; width: 49rpx; height: 38rpx; } .scroll_notice_item { margin-left: 61rpx; margin-top: 14rpx; height: 37rpx; font-family: PingFangSC; font-size: 26rpx; font-weight: 500; letter-spacing: 1rpx; text-align: left; color: #fff; } .scroll_notice_item_bg { position: relative; margin-left: 20rpx; height: 100%; display: inline-flex; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
next.js?getServerSideProps源碼解析
這篇文章主要為大家介紹了next.js?getServerSideProps源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10微信小程序?qū)崿F(xiàn)商品分類頁過程結(jié)束
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品分類頁列表方法,商品分類頁主要是需要實(shí)現(xiàn)商品類目和對應(yīng)商品標(biāo)題的聯(lián)動跳轉(zhuǎn),文中過程詳細(xì),感興趣的小伙伴們可以參考一下2023-05-05javascript驗(yàn)證完全方法具體實(shí)現(xiàn)
下面這段代碼完全實(shí)現(xiàn)了判斷是否合格.傳入號碼就行了,包括了算法,下面的是用Ext實(shí)現(xiàn)的,但是基于javascript的語法居多,基本都可以用2013-11-11js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法,涉及javascript針對浮點(diǎn)數(shù)的數(shù)值運(yùn)算相關(guān)技巧,需要的朋友可以參考下2016-08-08