微信小程序消息滚动组件

Posted 2020-12-08 masterchd

微信小程序消息滚动组件

样式效果如下:

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>