微信小程式 跑馬燈效果完整程式碼附效果圖
阿新 • • 發佈:2018-12-31
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。
微信小程式開發交流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的資料: