其他h5常见活动:
抽奖转盘: vue.js实现抽奖转盘
收取能量: vue.js实现收能量
红包雨: vue.js实现红包雨
vue.js实现转动抽奖: vue.js实现转动抽奖
1.文字上下滚动
<!-- 中奖播报列表 -->
<div id="app" class="board-cast-box" ref="boardCastBox">
<div :class="`${offsetY === 0 ? 'not-offset' : 'get-offset'}`" ref='movebox'
:style="{transform: 'translateY(-' + offsetY + 'px)'}">
<div v-for="(fitem, findex) in 2" :key="findex">
<div class="marquee-list" ref="list" v-for="(item,index) in list" :key='index'>
<div class="item">
{{item}}
</div>
</div>
</div>
</div>
</div>
<style>
.board-cast-box{
width: 300px;
height: 20px;
background-color: orange;
border: 1px solid yellowgreen;
border-radius: 8px;
overflow: hidden;
text-align: center;
}
.get-offset{
transition: .5s linear;
}
.not-offset{
transition: 0s linear;
}
.marquee-list{
font-size: 18px;
}
.item{
font-size: 16px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
initTop: 0,
offsetY: 0,
list: [
'张xxxx花 在幸运抽奖中获得1元红包',
'小xxxx绿 在幸运抽奖中获得2元红包',
'猪xxxx猪 在幸运抽奖中获得3元红包',
],
},
methods: {
initPage () {
const timer = setInterval(() => {
this.set()
}, 1500)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
},
set () {
if (this.offsetY >= this.$refs.movebox.offsetHeight / 2) {
// 如果偏移的位置已经超过了一个list,那么就重新开始计算
this.initTop = 0
this.offsetY = 0
this.$nextTick(() => {
this.moveTranslateY()
})
} else {
// 通过改变translateY来往反方向移动
this.moveTranslateY()
}
},
moveTranslateY() {
// 通过改变translateY来往反方向移动
this.initTop++
this.offsetY = this.initTop * (this.$refs.list[0].offsetHeight || 0)
}
},
mounted() {
this.initPage()
},
})
</script>
主要的思路是,在滚动一半的时候,重新移动
2. 进度条样式
<div id="app" class="progress-bar">
<div :style="initWidth" class="current-progress"></div>
</div>
<style>
.progress-bar {
width: 200px;
height: 30px;
border-radius: 30px;
background-color: yellow;
border: 1px solid yellowgreen;
overflow: hidden;
}
.current-progress {
background-color: red;
height: 100%;
box-sizing: content-box;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
initWidth: 'width: 10%',
},
})
</script>
</body>
主要还是通过百分比来控制进度条呢
3.div盒子内元素横向滚动
<div class="member-discount">
<ul class="member-discount-section">
<li :class="['member-discount-detail', { 'member-discount-detail-left' : index === 0 },
{ 'member-discount-detail-right' : index === list.length -1 },
currentIndex === index ? 'current-item': 'normal-item']"
v-for="(item, index) in list" :key="index" @click="selectMember(index)">
<div class="member-discount-title">{{ item.name }}</div>
<div class="member-discount-price"><span class="amount">
<span class="unit">￥</span>{{ item.price }}</span></div>
<div class="member-discount-time">{{ item.month }}个月</div>
<div class="member-discount-text">优惠5元</div>
</li>
</ul>
</div>
.member-discount-section {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
.member-discount-detail {
display: inline-block;
width: 224px;
height: 284px;
border-radius: 24px;
margin-right: 32px;
position: relative;
}
}
主要是通过ul li标签来实现 将-webkit-scrollbar设置display: none;去掉滚动条,给ui加上overflow-x: auto overflow-y: hidden;white-space: nowrap;,将li设置为 display: inline-block;
4.点击空白处关闭
<div v-if="showRuleVisible" class="play-rule" @click.stop="closeDialog">
<div class="play-rule-content">
内容内容
</div>
</div>
closeDialog (e) {
if (this.$refs.main && e.target.className === 'play-rule') {
this.showRuleVisible = false
}
},
可以获取到父元素的event对象,来判断只有在父元素这一层才发生关闭事件
