微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)
更新時(shí)間：2018年05月30日 08:59:07 作者：a_靖
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一：功能介紹及講解
實(shí)現(xiàn)的跑馬燈（跑馬燈里面顯示文章的title）的效果，并在右側(cè)有個(gè)查看文章的按鈕，按鈕綁定當(dāng)前的跑馬燈信息的id，點(diǎn)擊按鈕后根據(jù)id跳轉(zhuǎn)到相應(yīng)的文章詳情頁(yè)；
這里值得注意的點(diǎn)是我用了swiper組件的 bindchange 事件來(lái)獲取到當(dāng)前信息的數(shù)組下標(biāo)，實(shí)現(xiàn)了動(dòng)態(tài)改變查看按鈕綁定信息id值的效果；
如果還有不懂的地方歡迎加入（173683895）微信小程序開(kāi)發(fā)交流群。
二：效果圖：
三：完整源碼
1.封裝成一個(gè)組件：
<!-- //滾動(dòng) -->
<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.在頁(yè)面調(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ù)：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序組件化開(kāi)發(fā)的實(shí)戰(zhàn)步驟
雖然小程序在剛推出時(shí)是不支持組件化的,但如今小程序開(kāi)始支持自定義組件開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序組件化開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下2022-09-09
詳解ES6數(shù)組方法find()、findIndex()的總結(jié)
這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
一文讓你徹底弄懂js中undefined和null的區(qū)別
JavaScript是一門動(dòng)態(tài)類型語(yǔ)言,元素除了表示存在的空值外,還有可能根本就不存在,這就是undefined存在的原因,這篇文章主要給大家介紹了關(guān)于undefined和null區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了js原生Ajax的封裝和原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
如何判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象
如何判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象呢？下面小編就為大家?guī)?lái)一篇判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象的方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JavaScript內(nèi)置對(duì)象math,global功能與用法實(shí)例分析
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象math,global功能與用法,結(jié)合實(shí)例形式分析了javascript中內(nèi)置對(duì)象math與global的基本概念、功能及使用方法,需要的朋友可以參考下2019-06-06
js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Webpack 之 babel-loader文件預(yù)處理器詳解
這篇文章主要介紹了Webpack 之 babel-loader文件預(yù)處理器詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03