您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么在微信小程序中實現(xiàn)跑馬燈效果”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“怎么在微信小程序中實現(xiàn)跑馬燈效果”文章能幫助大家解決問題。
1.封裝成一個組件:
<!-- //滾動 --> <template name="roll"> <block> <navigator url='../details/details2/detail2?artical_id={{newsId}}'> <view class='chakan'>查看</view> </navigator> <view class='sx_lunbo page_row'> <text class='red'>公告</text> <swiper class='sx_swiper page_row' autoplay interval="5000" duration="3000" bindchange="newsId" data-newsId='{{item.id}}' circular> <swiper-item wx:for="{{news}}" wx:key=""> <view class='reds'>{{item.title}} </view> </swiper-item> </swiper> </view> </block> </template>
.sx_lunbo { width: 100%; height: 60rpx; border-bottom: solid 1px #eee; } .chakan{ padding-left: 25rpx; right: 20rpx; clear: both; position:absolute; height: 40rpx; margin-top: 10rpx; color: #f63; border:solid 1px #f63; border-radius:5rpx; padding: 0rpx 10rpx 0rpx 10rpx; font-size: 28rpx } .sx_swiper { width: 550rpx; margin-top: 10rpx; } .sx_swiper swiper-item{ height: 40rpx } .reds { overflow: hidden; text-overflow: ellipsis; white-space:nowrap; width:500rpx; font-size: 28rpx; height: 40rpx; } .red { font-size: 24rpx; color: white; width: 60rpx; height: 40rpx; line-height: 40rpx; background: blue; padding-left: 10rpx; margin: 10rpx; border-radius: 10rpx; }
2.在頁面調用:
<import src="../template/roll/roll.wxml" /> <template is="roll" data="{{news,newsId}}" />
@import "../template/roll/roll.wxss";
newsId: function (e) { var that = this var item = e.detail.current; this.setData({ newsId:that.data.news[item].id }) },
3.news的數(shù)據(jù):
關于“怎么在微信小程序中實現(xiàn)跑馬燈效果”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識,可以關注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。