微信小程序消息滚动组件

微信小程序消息滚动组件

样式效果如下:

技术图片

1.组件代码

新建组件rollnews

rollnews.js

更新newsList就可以更新滚动跳内容,可以通过prop数据绑定或lifetime请求接口更新数据。

Component({ options: { addGlobalClass: true, multipleSlots: true }, properties: { // 这里定义了innerText属性,属性值可以在组件使用时指定 innerText: { type: String, value: ‘default value‘, } }, data: { // 这里是一些组件内部数据 newsList:[ "下拉选择教学楼", "Tab选择" ], someData: {} }, methods: { // 这里是一个自定义方法 customMethod() {} }})

rollnews.wxml

<view class="radius bg-white"> <view class="kin-rolling-news" > <!--这个icon是引用colorui的,可以替换成图片,但是需要自己调整下样式--> <text class="cuIcon-message lg text-green"></text> <swiper vertical="{{true}}" autoplay="{{true}}" circular="{{true}}" interval="3000" class="kin-swiper"> <swiper-item wx:for="{{newsList}}" wx:key="{{index}}" class="kin-swiper-item"> <view class="kin-news-item" bindtap="detail">{{item}}</view> </swiper-item> </swiper> </view></view>

rollnews.wxss

.kin-notice-board { width: 100%; padding-right: 30rpx; box-sizing: border-box; font-size: 28rpx; height: 60rpx; background: #fff8d5; display: flex; align-items: center; position: fixed; top: 0; z-index: 999;}.kin-icon-bg { background: #fff8d5; padding-left: 30rpx; position: relative; z-index: 10;}.kin-rolling-icon { margin-right: 12rpx;}.kin-scorll-view { flex: 1; line-height: 1; white-space: nowrap; overflow: hidden; color: #f54f46;}.kin-notice{ transform: translateX(100%);}.kin-animation { -webkit-animation: kin-rolling 12s linear infinite; animation: kin-rolling 12s linear infinite;}@-webkit-keyframes kin-rolling { 0% { transform: translateX(100%); } 100% { transform: translateX(-170%); }}@keyframes kin-rolling { 0% { transform: translateX(100%); } 100% { transform: translateX(-170%); }}.kin-subject { font-size: 32rpx; font-weight: bold;}.kin-rolling-news { margin-left:30rpx; padding: 0rpx; height:80rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}.kin-swiper { font-size: 30rpx; height: 60rpx; flex: 1;}.kin-swiper-item{ display: flex; align-items: center}.kin-news-item { line-height: 35rpx; overflow: hidden;}.kin-searchbox { padding: 60rpx 80rpx; box-sizing: border-box;}

2.组件引用

在引用界面json数据中进行配置

{ "usingComponents": { "rollnews":"../../../components/rollnews/rollnews" }}

之后就可以直接在页面中进行引用

<rollnews></rollnews>

相关文章