微信小程序左右滚动公告栏效果
<view class='notice-wrap' hidden='{{hideNotice}}'>
<view class='tongzhitext'>
<text class="tongzhi-text">{{notice}}</text>
</view>
<view bindtap='switchNotice' class="closeView">x</view>
</view>
data: {
//初始化数据
hideNotice: false,
notice: '请和您的医生一起根据个体情况决定',
}
// 点击关闭公告
switchNotice: function() {
this.setData({
hideNotice: true
})
},
@keyframes remindMessage {
0% {
-webkit-transform: translateX(90%);
} 100% {
-webkit-transform: translateX(-180%);
}
} .tongzhitext {
margin-right:80rpx;
margin-left: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} .tongzhi-text {
font-size: 28rpx;
animation: remindMessage 14s linear infinite;
width: 100%;
color: #d09868;
display: block;
} .notice-wrap {
background: #ffebda;
width: 100%;
height: 60rpx;
line-height: 60rpx;
color: #d09868;
font-size: 28rpx;
} .closeView {
width: 45rpx;
height: 45rpx;
line-height: 45rpx;
position: absolute;
right: 20rpx;
top: 5rpx;
text-align: center;
font-size: 35rpx;
}
效果展示
还有一种效果出现白边后就开始显示
.box {
width: 420rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
background: rgba(58, 160, 234, 1);
border-radius: 46rpx;
color: #fff;
font-size: 28rpx;
margin-left: 32rpx;
margin-right: 32rpx;
position: relative;
display: flex;
align-items: center;
text-indent: 10rpx;
overflow: hidden;
} .text {
white-space: nowrap;
position: absolute;
top: 0;
}
<!-- 公告 -->
<view>出现白边后即显示:</view>
<view class="box">
<view class="text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
<text>{{text}}</text>
<text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
</view> </view>
<!-- 公告end -->
data:{
marqueeDistance2: 0,
marquee2copy_status: false,
marquee2_margin: 120,
size: 14,
orientation: 'left', //滚动方向
interval: 20 // 时间间隔
},
onShow: function() {
// =============
// 页面显示
var vm = this;
var length = vm.data.text.length * vm.data.size; //文字长度
let windowWidth = '';
// var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度
let query = wx.createSelectorQuery()
query.select('.text').boundingClientRect()
query.exec((rect) => {
windowWidth = rect[0].width
})
vm.setData({
length: length,
windowWidth: windowWidth,
marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin //当文字长度小于屏幕长度时,需要增加补白
});
vm.run2(); // 第一个字消失后立即从右边出现 },
// ===========
run2: function () {
var vm = this;
var interval = setInterval(function () {
if (-vm.data.marqueeDistance2 < vm.data.length) {
// 如果文字滚动到出现marquee2_margin=30px的白边,就接着显示
vm.setData({
marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
});
} else {
if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
vm.setData({
marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动
});
clearInterval(interval);
vm.run2();
} else {
clearInterval(interval);
vm.setData({
marqueeDistance2: -vm.data.windowWidth
});
vm.run2();
}
}
}, vm.data.interval);
},
微信小程序左右滚动公告栏效果的更多相关文章
- 微信小程序-通知滚动小提示
代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序scroll-view滚动一次多次触发的问题解决方案
最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
- 微信小程序实现淡入淡出效果(页面跳转)
//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写 <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- 微信小程序实现滚动视频自动播放(未优化)
先看看大概效果 1.首先需要了解微信API: wx.createIntersectionObserver(Object component, Object options) 创建并返 ...
- 微信小程序—picker(滚动选择器)
官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...
- 微信小程序bnner滚动
首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加. Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全 ...
- 微信小程序实现滚动加载更多
1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...
随机推荐
- 【poj 1182】食物链(图论--带权并查集)
题意:有3种动物A.B.C,形成一个"A吃B, B吃C,C吃A "的食物链.有一个人对N只这3类的动物有M种说法:第一种说法是"1 X Y",表示X和Y是同类. ...
- Poj-3922 A simple stone game(k倍动态减法)
题意: 游戏是这样的:两个玩家以一堆n个石头开始游戏.他们轮流从石堆里取石头,每次至少取一块.先走的人第一步最多可以拿n-1块石头.从那时起,一个玩家最多可以拿k倍于他的对手上次拿的石头.例如,如果一 ...
- CF1415-C. Bouncing Ball
CF1415-C. Bouncing Ball 题意: 在\(x\)轴上有\(n\)个点(从\(1\)到\(n\)),每个点都有一个值\(0\)或\(1\),\(0\)代表这个点不能走,\(1\)代表 ...
- 【转】K8S中部署Helm
K8S中的包管理工具 1. 客户端Helm(即Helm) 通过脚本安装:curl https://raw.githubusercontent.com/helm/helm/master/scripts ...
- keepalived.conf说明
keepalived.conf说明 发表于 2017-06-04 | 分类于 运维相关 , Keepalived | | 阅读次数 348 | 字数统计 1,889 | 阅读时长预计 8 本文主要介绍 ...
- JavaScript事件绑定的三种方式
(一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...
- 关于FFT的一些理解,以及如何手工计算FFT加深理解和验证正确性
总结缺少逻辑性和系统性,主要便于自己理解和记忆 关于一维FFT的 于是复系数Cn是图像傅里叶变换的yn列向量 于是我们看到最后引入,Cn这个复系数的模来表征频率波的振幅记为Sn(即简谐波叠加的数量 然 ...
- 后Low Code时代:聚焦和突破
很多人都不想被贴上标签,我曾经也一样.觉得青春不能被定义,人也不能被分类.但随着学习和工作的变迁,慢慢开始发现标签也是一种名片效应. 比如一个做汽车销售的朋友,他就对BMW的车型非常熟悉,可以说是懂车 ...
- Graphviz - Graph Visualization Software 开源可视化绘图工具(visio 类)
http://www.graphviz.org/Download_windows.php Welcome to Graphviz Available translations: Romanian, ...
- soft tab
soft tab hard-tabs 是硬件 tab,就是按一个 tab 键; soft-tabs 是软件 tab,通过按 4个 space 键实现; refs Tabs vs. Spaces, FR ...