weapp/game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加顶部跑马灯

Browse Source
This commit is contained in:
zhl 2019-04-22 14:23:08 +08:00
parent 888f66178d
commit aebeda8107
7 changed files with 160 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/z-scroll-text.wpy Normal file
View File

@ -0,0 +1,92 @@
<style lang="less">
@import "../style/z-scroll-text.less";
</style>
<!--跑马灯文字-->
<template>
<view animation="{{displayAnimationData}}" class="scroll-container ">
<text class="scroll-content" decode="{{true}}" style="right:{{announZf}}{{announNum}}px">{{title}}</text>
<view class="scroll-icon left">
<i class="icon-bullhorn"></i>
</view>
<view class="scroll-icon right red" @tap="closeMe">
<i class="icon-cancel-circle"></i>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import base from '../mixins/base';
export default class zScrollText extends wepy.component {
mixins = [base];
props = {
show: true
}
data = {
title: '',
announNum : 0,
announy : 280,
announZf : '-',
interval: null,
displayAnimationData: {},
}
methods = {
showScrollText({title = ''}) {
this.title = title;
this.show = true;
this.$apply();
this.toggleShow();
this.excuseScrollAnimation();
},
closeMe() {
this.show = false;
this.toggleShow();
}
}
excuseScrollAnimation = async () => {
//加上100是因为防止在归零时出现闪烁的情况
let maxContentWidth = wepy.getSystemInfoSync().windowWidth + 100;
let self = this;
let maxTextWidth = await this.queryViewWidth('scroll-content');
self.announNum = maxTextWidth
self.$apply();
if (self.interval) {
clearInterval(self.interval);
}
this.interval = setInterval(()=>{
if(self.announZf === '-') {
if(self.announNum <= 0) {
self.announZf = ''
} else {
self.announNum -= 1
}
} else {
if(self.announNum > (maxContentWidth)) {
//归位
self.announZf = '-'
self.announNum = maxTextWidth
} else {
self.announNum += 1
}
}
self.$apply();
}, 20)
}
toggleShow = () => {
// 原生动画
let animation = wepy.createAnimation({
duration: 400,
timingFunction: 'ease'
})
wx.createSelectorQuery()
.select('.scroll-container')
.boundingClientRect((rect) => {
this.show
? animation.translateY().step()
: animation.translateY(-rect.height).step()
this.displayAnimationData = animation.export()
this.$apply()
}).exec();
}
}
</script>

2
src/components/z-search-bar.wpy
View File

@ -1,6 +1,6 @@
<!--顶部搜索条-->
<style lang="less">
@import "../style/search.less";
@import "../style/z-search-bar.less";
</style>
<template>
<view class="z-search-bar">

12
src/mixins/base.js
View File

@ -180,4 +180,16 @@ export default class baseMixin extends wepy.mixin {
return console.log(e);
}
}
/**
* 根据class获取宽度
* */
queryViewWidth(viewClass) {
//创建节点选择器
return new Promise(function(resolve) {
let query = wx.createSelectorQuery();
query.select('.' + viewClass).boundingClientRect(function(rect) {
resolve(rect.width);
}).exec();
});
}
}

15
src/pages/index.wpy
View File

@ -57,6 +57,7 @@
<toast/>
<inviteView :config.sync="inviteViewCfg" :btnList.sync="inviteBtns" @inviteBtnClick.user="inviteBtnClick" @needHideMe.user="hideInviteView"></inviteView>
<zanToptips/>
<zScrollText/>
</view>
</template>
@ -76,6 +77,7 @@
import tips from '../mixins/tips';
import cfg from '../mixins/cfg';
import nav from '../mixins/nav';
import zScrollText from '../components/z-scroll-text';
export default class Index extends wepy.page {
mixins = [base, tips, cfg, nav];
@ -91,7 +93,8 @@
myGame: recentGame,
zanLoadmore: zanLoadmore,
inviteView: inviteView,
zanToptips: zanToptips
zanToptips: zanToptips,
zScrollText: zScrollText
};
data = {
@ -134,9 +137,10 @@
this.$toGameInfo(gid);
},
async toSearch() {
wepy.navigateTo({
url: '/pages/search'
})
this.showScollText('你已成功领取100元代金券，点击查看详情，想看就看，你已成功领取100元代金券，点击查看详情，想看就看，你已成功领取100元代金券，点击查看详情，想看就看');
// wepy.navigateTo({
// url: '/pages/search'
// })
// let movie = 'http://iqiyi.kuyun-bofang.com/20190208/eebojrT3/index.m3u8'
// this.$toMovie(movie, '流浪地球');
},
@ -343,6 +347,9 @@
showTopTips(msg, type = 'error') {
this.$invoke('zanToptips', 'showZanTopTips', { content: msg, type: type})
}
showScollText(title) {
this.$invoke('zScrollText', 'showScrollText', {title: title})
}
async getRecentGames() {
try {
let res = await http.post('/api/emulated/recent_games');

8
src/style/font.wxss
View File

@ -1,6 +1,6 @@
@font-face {
font-family: 'xmjlicons';
src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
@ -20,6 +20,9 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-bullhorn:before {
content: "\e91a";
}
.icon-cart:before {
content: "\e93a";
}
@ -32,6 +35,9 @@
.icon-star-full:before {
content: "\e9d9";
}
.icon-cancel-circle:before {
content: "\ea0d";
}
.icon-checkmark:before {
content: "\ea10";
}

37
src/style/z-scroll-text.less Normal file
View File

@ -0,0 +1,37 @@
@zScrollBarHeight: 60rpx;
@zScrollBarBackColor: green;
.scroll-container {
display: block;
position: fixed;
width: 100%;
top: 0;
transform: translateY(-100%);
line-height: 60rpx;
font-size: 20rpx;
height: @zScrollBarHeight;
text-align: center;
z-index: 110;
background-color: @zScrollBarBackColor;
}
.scroll-container .scroll-content {
white-space: nowrap;
position: absolute;
top: 0;
font-size: 14px;
}
.scroll-container .scroll-icon {
background-color: @zScrollBarBackColor;
position: absolute;
top: 0;
width: @zScrollBarHeight;
height: @zScrollBarHeight;
font-size: @zScrollBarHeight/3*2;
}
.scroll-container .left {
left: 0;
}
.scroll-container .right {
right: 0;
color: red;
}

0
src/style/search.less → src/style/z-search-bar.less
View File