【小程序】已购买用户弹出提示 博客分类： 代码交流 小程序弹出通知

getEject:function(){
	var arr =[
	  {
		name: "木紫槿",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "细节",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "决定",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "成败",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "新数据1",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "新数据2",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "新数据3",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "新数据4",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	  {
		name: "新数据5",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: "已购买"
	  },
	] 
	var count = 0;
	var array = new Array();
	var that = this;
	var timer1 = setInterval(function(){
	  var time = Date.parse(new Date())
	  if(count<4){
		array.push(arr[count]);
		that.setData({
		  eject: array
		})
	  }else{
		clearInterval(timer1)
	  }
	  count++;
	},1000)
	var index = 4;
	var arrIndex = 0;
	var timer2 = setInterval(function () {
	  if (index >= arr.length&&count>4) {
		index = 0
		var eject = that.data.eject;
		eject[arrIndex] = arr[index]
		that.setData({
		  eject: eject
		})
		index++;
	  } else if (index < arr.length && count >4) {
		var eject = that.data.eject;
		eject[arrIndex] = arr[index]
		that.setData({
		  eject: eject
		})
		index++;
	  }
	  if (arrIndex<3){
		arrIndex++
	  }else{
		arrIndex = 0
	  }
	}, 1000)


},

 HTML 代码：

<view id="eject">
<view class="eject-notice" wx:for="{{eject}}" wx:key="key">
	  <image src="{{item.imageUrl}}"></image>
  <text>{{item.name}}</text>
  <view class="state">{{item.state}}</view>
</view>
</view>

 CSS 样式：

.eject-notice{
	height: 30px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-radius: 15px;
	background: rgba(0,0,0,0.6);
	position: fixed;
	left: 8px;
	bottom: 300rpx;
	z-index: 9999;
	color: #fff;
	font-size: 12px;
	animation: ejectIn 4s infinite;
	-webkit-animation: ejectIn 4s infinite;
  /* animation-iteration-count: 1; */
	animation-timing-function:linear;
	-webkit-animation-timing-function: linear;
	opacity: 0;
}
.eject-notice image{
	width: 25px;
	height: 25px;
	margin: 5px;
	border-radius: 50%;
	margin-right: 10px; 
}
.eject-notice .state{
	height: 30px;
	border-radius: 15px;
	background-color: #FF3545;
	color: #fff;
	font-size: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10px;
	margin-left: 5px;
}
@keyframes ejectIn{
	0%{
		left: -200px;
		bottom: 300px;
	}
	10%{
		left: 50px;
		bottom: 300px;
	}
	16%{
		left: -10px;
		opacity: 1;
	}
	18%{
		left: 10px;
	}
	60%{
		bottom:375px;
		opacity: 1;
	}
	80%{
		bottom: 412.5px;
		opacity: 0;
	}
	100%{
		left: 10px;
		bottom: 450px;
		opacity: 0;
	}
}
@-webkit-keyframes ejectIn{
	0%{
		left: -200px;
		bottom: 300px;
	}
	10%{
		left: 50px;
		bottom: 300px;
	}
	16%{
		left: -10px;
		opacity: 1;
	}
	18%{
		left: 10px;
	}
	60%{
		bottom: 375px;
		opacity: 1;
	}
	80%{
		bottom:412.5px;
		opacity: 0;
	}
	100%{
		left: 10px;
		bottom: 450px;
		opacity: 0;
	}
}

 小程序的有些复杂，不能像web一样操作dom删除之前的节点，只能控制循环的数组的值。

H5的话，一个定时器就够了。