有問題可以掃碼加我微信，有償解決問題。承接小程式開發。

微信小程式開發交流qq群   173683895  、 526474645 ；

正文：

一：功能介紹及講解

實現的跑馬燈（跑馬燈裡面顯示文章的title）的效果，並在右側有個檢視文章的按鈕，按鈕綁定當前的跑馬燈資訊的id，點選按鈕後根據id跳轉到相應的文章詳情頁；

這裡值得注意的點是我用了swiper元件的 bindchange 事件來獲取到當前資訊的陣列下標，實現了動態改變檢視按鈕繫結資訊id值的效果；

如果還有不懂的地方歡迎加入（173683895）微信小程式開發交流群。

二：效果圖：

三：完整原始碼

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的資料：