原生微信小程序动态（横向，纵向）公告（广告）栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了原生微信小程序动态（横向，纵向）公告（广告）栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先看一下动态效果

原生微信小程序动态（横向，纵向）公告（广告）栏,微信小程序,小程序

Y轴滚动公告的原理是swiper组件在页面中的Y轴滚动，属性vertical，其余属性也设置一下autoplay circular interval="3000"

X轴滚动的原理是，利用动画效果，将内容从右往左过渡过去

wxml：

<!-- Y轴滚动公告 -->
<view class="wrapY">
	<swiper
	 class="swiper_wrap"
	 vertical
	 autoplay
	 circular
	 interval="3000"
	>
		<block class="block_wrap" wx:for="{{items}}">
			<swiper-item>
				<view class="itemCon">{{item.title}}</view>
			</swiper-item>
		</block>
	</swiper>
</view>
<!-- X轴滚动公告 -->
<view class='wrapX'>
	<view class="wrapOut">
		<view class="wrapInner">
			<view class="contant">{{notice}}</view>
		</view>
	</view>
</view>

wxss：

view,
swiper,
swiper-item,
navigator {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapY {
  padding: 20rpx;
}
.wrapY .swiper_wrap {
  width: 95vw;
  height: 60rpx;
  background-color: #FFEBDA;
  border-radius: 30rpx;
  padding-left: 40rpx;
  padding-right: 30rpx;
}
.wrapY .swiper_wrap .itemCon {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 60rpx;
}
.wrapX {
  padding: 20rpx;
}
.wrapX .wrapOut {
  background-color: #FFEBDA;
  height: 60rpx;
  border-radius: 30rpx;
  overflow: hidden;
}
.wrapX .wrapOut .wrapInner {
  overflow: hidden;
  margin-left: 40rpx;
  margin-right: 40rpx;
}
.wrapX .wrapOut .wrapInner .contant {
  line-height: 60rpx;
  white-space: nowrap;
  animation: remindMessage 13s linear infinite;
  width: 100%;
}
@keyframes remindMessage {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-180%);
  }
}

less：

view,
swiper,
swiper-item,
navigator {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapY {
    padding: 20rpx;

    .swiper_wrap {
        width: 95vw;
        height: 60rpx;
        background-color: #FFEBDA;
        border-radius: 30rpx;
        padding-left: 40rpx;
        padding-right: 30rpx;



        .itemCon {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 60rpx;
        }
    }
}

.wrapX {
    padding: 20rpx;


    .wrapOut {
        background-color: #FFEBDA;
        height: 60rpx;
        border-radius: 30rpx;
        overflow: hidden;

        .wrapInner {
            overflow: hidden;
            // 这里不能用padding，会被当做盒子的一部分，文字到达一定部位之后，仍然不会隐藏
            margin-left: 40rpx;
            margin-right: 40rpx;

            .contant {
                line-height: 60rpx;
                white-space: nowrap;
                animation: remindMessage 13s linear infinite;
                width: 100%;
            }
        }
    }

}

@keyframes remindMessage {
    0% {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-180%);
    }
}

js：文章来源地址https://www.toymoban.com/news/detail-685759.html

Page({
  data: {
    items: [
      {
        title: "公告：由加莉由加莉由加莉由加莉由加莉由加莉由加莉由加莉由加莉"
      },
      {
        title: "公告：真步真步真步真步真步真步真步真步真步真步真步真步真步真步"
      },
      {
        title: "公告：镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华"
      }
    ],
    notice: ""
  },
  onLoad: function (options) {
    this.autoChangeX();
  },
  autoChangeX: function () {
    // 定义初始第一条的内容
    let index = 0;
    const { items } = this.data;
    this.setData({
      notice: items[0].title
    })
    index++;
    // 设置定时器，和动画时间间隔相等
    // 每隔13秒更换X轴公告的内容
    setInterval(() => {
      if (index === items.length - 1) {
        this.setData({
          notice: items[index].title
        })
        index = 0;
      } else {
        this.setData({
          notice: items[index].title
        })
        index++;
      }
    }, 1000 * 13)
  }
})

到了这里，关于原生微信小程序动态（横向，纵向）公告（广告）栏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！