微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)
更新時間：2018年05月30日 08:59:07 作者：a_靖
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一：功能介紹及講解
實現(xiàn)的跑馬燈（跑馬燈里面顯示文章的title）的效果，并在右側(cè)有個查看文章的按鈕，按鈕綁定當(dāng)前的跑馬燈信息的id，點擊按鈕后根據(jù)id跳轉(zhuǎn)到相應(yīng)的文章詳情頁；
這里值得注意的點是我用了swiper組件的 bindchange 事件來獲取到當(dāng)前信息的數(shù)組下標(biāo)，實現(xiàn)了動態(tài)改變查看按鈕綁定信息id值的效果；
如果還有不懂的地方歡迎加入（173683895）微信小程序開發(fā)交流群。
二：效果圖：
三：完整源碼
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.在頁面調(diào)用：
<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ù)：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家?guī)韮煞Njs中查找字符串中出現(xiàn)次數(shù)最多的字符，在這兩種方法中小編推薦使用第二種，對js查找字符串出現(xiàn)次數(shù)的相關(guān)知識感興趣的朋友一起看看吧2016-09-09
為body標(biāo)簽和document.body都添加點擊事件后僅Firefox彈出了兩次
為body標(biāo)簽和document.body都添加點擊事件后僅Firefox彈出了兩次，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了js實現(xiàn)俄羅斯方塊小游戲分享,,需要的朋友可以參考下2014-01-01
BootStrap的alert提示框的關(guān)閉后再顯示怎么解決
這篇文章主要介紹了BootStrap的alert提示框的關(guān)閉后再顯示問題的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)時間日期校驗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
JS實現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式匯總
這篇文章主要介紹了JS實現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式,簡單總結(jié)了幾種頁面跳轉(zhuǎn)功能的實現(xiàn),有使用js跳轉(zhuǎn)頁面,返回上一次預(yù)覽界面及button按鈕添加事件跳轉(zhuǎn),本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
微信小程序非跳轉(zhuǎn)式組件授權(quán)登錄的方法示例
這篇文章主要介紹了微信小程序非跳轉(zhuǎn)式組件授權(quán)登錄的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
JavaScript可折疊區(qū)域?qū)崿F(xiàn)代碼
可折疊區(qū)域的基本思想：通過點擊某個地方來顯示或隱藏屏幕中的某個區(qū)域。2010-10-10
JS實現(xiàn)鼠標(biāo)移上去顯示圖片或微信二維碼
本文給大家分享一段使用的js代碼實現(xiàn)鼠標(biāo)移入顯示圖片或微信二維碼樣式，代碼簡單易懂，非常不錯，需要的朋友參考下吧2016-12-12