Fix:[#988,#987,#986,#985,#983]修复测试反馈的问题和调整内容
This commit is contained in:
lifizer
@@ -0,0 +1,492 @@
|
||||
<template>
|
||||
<view class="marquee_box" @touchstart='touchstartFn' @touchend='touchendFn'>
|
||||
<block v-show="isShow">
|
||||
<view class="" v-if="direction=='right'||direction=='left'">
|
||||
<view v-if="broadcastType=='text'" class="marquee_container" :style="'background:'+broadcastStylees.back_color+';'">
|
||||
<view v-if="broadcastIconIsDisplay" class="broadIcon" :style="'background:'+broadcastStylees.back_color+';font-size:28rpx;'">
|
||||
<text class="iconfont icon-guangbozheng-"></text>
|
||||
<text style="margin-left:12rpx;">{{broadcast_tit}}:</text>
|
||||
</view>
|
||||
<view class="boradcast_text_left_rig" :class='[direction=="left"?"marquee_text_left":direction=="right"?"marquee_text_right":"",animation_paused?"animation_pausedcss":""]'
|
||||
:style="'--marqueeWidth--:'+(-broadcastStylees.width_mal)+'px;--speed--:'+broadcastStylees.time+'s;width:'+broadcastStylees.width_mal+'px;'">
|
||||
<view v-for="(item,index) in broadcastDataes" @click.stop="click_event(index)" :key="index" :style="'color:'+broadcastStylees.text_color+';margin-left:'+(index!=0?item.starspos:0)+'px;font-size:'+broadcastStylees.font_size+'rpx;'">
|
||||
{{item.text}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="broadcastType=='mould'" class="mould">
|
||||
<view class="" style="width: 100%;position: relative;overflow: hidden;" :style="'height:'+viewHeight+'rpx;'">
|
||||
<view class="broadcastTopBtm dsf" :class="[direction=='left'?'broadcastDataTopBtmDatacss_let':direction=='right'?'broadcastDataTopBtmDatacss_rig':'',animation_paused?'animation_pausedcss':'']"
|
||||
:style="'--scrollWidth--:'+(-(scrlloWidth/2))+'px;--scrollSpeed2--:'+(scrlloWidth/broadcastStyle.speed)+'s;width:'+(scrlloWidth*2)+'px;'">
|
||||
<view ref="mouldRef" class="bml01" style="display: flex;justify-content: space-between;">
|
||||
<slot />
|
||||
<!-- <slot /> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="direction=='top'||direction=='bottom'" class="broadcastTopBtm" :style="'font-size:'+broadcastStyle.font_size+'rpx;color:'+broadcastStyle.text_color+';background:'+broadcastStyle.back_color+';height:'+viewHeight+'rpx;--scrollHeight--:'+(-broadcastTopBtmHeight/2)+'px;--scrollSpeed--:'+((broadcastTopBtmHeight/2)/broadcastStyle.speed)+'s;'">
|
||||
<view v-if="broadcastType=='text'" :class="[direction=='top'?'broadcastDataTopBtmDatacss_top':direction=='bottom'?'broadcastDataTopBtmDatacss_bottom':'',animation_paused?'animation_pausedcss':'']">
|
||||
<view v-for="(item,index) in broadcastDataTopBtmDataes" :key="index" @click.stop="click_event()" class="bdbd_item">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="broadcastType=='mould'" :class="[direction=='top'?'broadcastDataTopBtmDatacss_top':direction=='bottom'?'broadcastDataTopBtmDatacss_bottom':'',animation_paused?'animation_pausedcss':'']">
|
||||
<slot />
|
||||
<!-- <slot /> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* author:G.bro
|
||||
* date:20200513
|
||||
* * **/
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
broadcastDataes: [],
|
||||
broadcastDataTopBtmDataes: [],
|
||||
broadcastStylees: {},
|
||||
broadcastTopBtmHeight: 0,
|
||||
scrlloWidth: 0,
|
||||
animation_paused: false,
|
||||
qualifications: true,
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
broadcastType: {
|
||||
type: String,
|
||||
default: 'text' //mould
|
||||
},
|
||||
imgdata: {
|
||||
type: Array
|
||||
},
|
||||
broadcastData: {
|
||||
type: Array
|
||||
},
|
||||
broadcastStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
speed: 90, //滚动速度，每秒3个字
|
||||
font_size: "28", //字体大小(rpx)
|
||||
text_color: "#fff", //字体颜色
|
||||
back_color: "#815CD4", //背景色
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
broadcastIconIsDisplay: { //图标是否显示
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// broadcast_icon: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
broadcast_tit: {
|
||||
type: String,
|
||||
default: '今日热点'
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
viewHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
touchEvent: {
|
||||
type: true,
|
||||
default: false
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
broadcastData(v) {
|
||||
console.log(v, '---')
|
||||
|
||||
if (v.length) {
|
||||
this.isShow = true;
|
||||
this.initialization();
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
imgdata(v) {
|
||||
console.log(v, '---')
|
||||
this.isShow = true;
|
||||
this.initialization();
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// if(this.broadcastType=='text'){有偏差
|
||||
// let assist = { ...this.broadcastStyle};
|
||||
// const querys = uni.createSelectorQuery().in(this)
|
||||
// querys.select('.boradcast_text_left_rig').boundingClientRect(rect => {
|
||||
// assist.width_mal = rect.width;
|
||||
// assist.time = rect.width/assist.speed;
|
||||
// that.broadcastStylees=assist;
|
||||
// }).exec()
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
initialization() {
|
||||
let that = this;
|
||||
|
||||
if (that.broadcastType == "text") {
|
||||
if (that.direction == "right" || that.direction == "left") {
|
||||
that.initial_let_rig();
|
||||
} else {
|
||||
let arr = [...that.broadcastData];
|
||||
arr = arr.concat(arr);
|
||||
that.broadcastDataTopBtmDataes = arr;
|
||||
}
|
||||
}
|
||||
|
||||
if (that.direction == "top" || that.direction == "bottom") {
|
||||
that.$nextTick(() => {
|
||||
let dir = `.broadcastDataTopBtmDatacss_${that.direction}`
|
||||
const query2 = uni.createSelectorQuery().in(that);
|
||||
query2.select(dir).boundingClientRect(rect => {
|
||||
that.broadcastTopBtmHeight = rect.height;
|
||||
console.log(rect, '==rect.height')
|
||||
|
||||
if (that.viewHeight - rect.height > 10) {
|
||||
that.qualifications = false;
|
||||
that.animation_paused = true;
|
||||
that.broadcastDataTopBtmDataes.splice(that.broadcastDataTopBtmDataes.length / 2, that.broadcastDataTopBtmDataes
|
||||
.length - 1);
|
||||
}
|
||||
|
||||
}).exec();
|
||||
})
|
||||
|
||||
}
|
||||
if (that.direction == "left" || that.direction == "right") {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
if (that.broadcastType == 'mould') {
|
||||
const query = uni.createSelectorQuery().in(that)
|
||||
query.select('.bml01').boundingClientRect(rect => {
|
||||
that.scrlloWidth = rect.width;
|
||||
console.log(rect, '===================rect.width')
|
||||
}).exec()
|
||||
}
|
||||
} catch (e) {
|
||||
that.scrlloWidth = that.$refs.mouldRef.$el.clientWidth * 2
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
touchendFn(e) {
|
||||
if (this.touchEvent && this.qualifications) {
|
||||
this.animation_paused = false;
|
||||
}
|
||||
},
|
||||
touchstartFn(e) {
|
||||
if (this.touchEvent && this.qualifications) {
|
||||
this.animation_paused = true;
|
||||
}
|
||||
},
|
||||
initial_let_rig() {
|
||||
let broadcastData = [...this.broadcastData];
|
||||
console.log(this.direction, 'this.direction')
|
||||
if (this.direction == "right") {
|
||||
broadcastData.reverse();
|
||||
}
|
||||
|
||||
let ititdata = broadcastData.map((item) => {
|
||||
return {
|
||||
"text": item,
|
||||
"starspos": uni.getSystemInfoSync().windowWidth - 103
|
||||
}
|
||||
}),
|
||||
assist = { ...this.broadcastStyle
|
||||
},
|
||||
this_width = 0,
|
||||
spacing = 0,
|
||||
speed = (assist.speed * assist.font_size); //m每秒行走的距离
|
||||
|
||||
for (let i in ititdata) {
|
||||
this_width += ititdata[i].text.length * assist.font_size;
|
||||
if (i != ititdata.length - 1) {
|
||||
spacing += ititdata[i].starspos
|
||||
}
|
||||
}
|
||||
let total_length = (this_width / 2) + spacing; //总长
|
||||
assist.time = total_length / speed; /**滚动时间*/
|
||||
assist.width_mal = total_length;
|
||||
this.broadcastDataes = ititdata;
|
||||
this.broadcastStylees = assist;
|
||||
},
|
||||
click_event(index) {
|
||||
let i;
|
||||
if (index > ((broadcastDataTopBtmDataes.length / 2) - 1)) {
|
||||
i = index - (broadcastDataTopBtmDataes.length / 2);
|
||||
} else {
|
||||
i = index
|
||||
}
|
||||
this.$emit("changeEvent", {
|
||||
i,
|
||||
msg: `你点击了${i+1}条`
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* app端有可能要加上 */
|
||||
/* page {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
} */
|
||||
|
||||
.marquee_box {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: inherit;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mould {
|
||||
width: 750rpx;
|
||||
overflow: hidden;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.dsf {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.broadIcon {
|
||||
/* width: 60rpx; */
|
||||
padding: 0 22rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
line-height: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.marquee_container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
.marquee_text_left {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
animation-name: around_left;
|
||||
animation-duration: var(--speed--);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
line-height: 60rpx;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
@keyframes around_left {
|
||||
from {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: var(--marqueeWidth--);
|
||||
}
|
||||
}
|
||||
|
||||
.marquee_text_right {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
animation-name: around_right;
|
||||
animation-duration: var(--speed--);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
line-height: 60rpx;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
@keyframes around_right {
|
||||
from {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
right: var(--marqueeWidth--);
|
||||
}
|
||||
}
|
||||
|
||||
.marquee_tit {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
.broadcastTopBtm {
|
||||
padding: 12rx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.broadcastDataTopBtmDatacss_top {
|
||||
width: 100%;
|
||||
animation-name: around_top;
|
||||
animation-duration: var(--scrollSpeed--);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@keyframes around_top {
|
||||
from {
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
to {
|
||||
top: var(--scrollHeight--);
|
||||
}
|
||||
}
|
||||
|
||||
.broadcastDataTopBtmDatacss_bottom {
|
||||
width: 100%;
|
||||
animation-name: around_Bottom;
|
||||
animation-duration: var(--scrollSpeed--);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@keyframes around_Bottom {
|
||||
from {
|
||||
bottom: 0%;
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: var(--scrollHeight--);
|
||||
}
|
||||
}
|
||||
|
||||
.broadcastDataTopBtmDatacss_let {
|
||||
width: 100%;
|
||||
animation-name: around_let;
|
||||
animation-duration: var(--scrollSpeed2--);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.broadcastDataTopBtmDatacss_rig {
|
||||
|
||||
width: 100%;
|
||||
animation-name: around_rig;
|
||||
animation-duration: var(--scrollSpeed2--);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.animation_pausedcss {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes around_let {
|
||||
from {
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: var(--scrollWidth--);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes around_rig {
|
||||
from {
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
to {
|
||||
right: var(--scrollWidth--);
|
||||
}
|
||||
}
|
||||
|
||||
.bdbd_item {
|
||||
padding: 0 12rpx;
|
||||
line-height: 60rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url('//at.alicdn.com/t/font_1686137_9el2ov99ag.eot?t=1589197045289');
|
||||
/* IE9 */
|
||||
src: url('//at.alicdn.com/t/font_1686137_9el2ov99ag.eot?t=1589197045289#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANIAAsAAAAAByAAAAL7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCJIIbATYCJAMICwYABCAFhG0HNxtIBhHVmxnIfiTYMS7bb8koPCedCeJJj2/e7iZfYqkjkZzk9lw0oCspm5uha1SEYUrOg//lO9IN4UL4FQBGHE6b4vPv8pzmojHnedQFGG8NaG9cCySQAgnMG8ZuIniA2yGAP8kUIg0ateiALwbQTwAZMXRwX3wLLgzGifoi2A1TDbIKC1+1WF0CVvLvy0fKxRcUlgYkthnUcAB13sA47XgOPSgBwXIGwJkFGigEDEiHRlMrtAwVovGPQoZ0OFa2wJs6nkf5h/3jgYDYgMxAABJ1/jMJsPBRMxUARq/vB7iTzgYmPjQ5vv+S6E4b/P2XXBBxLwYELI3pvDFm/XqMs27QknXgrK82yepoddiXOXTJhi3NTe/e7XznTqcNG7ZujLoN2Drexulwy99hXacl0UZCzNW77p1WfV52MOpyx+O3nVuFt1qs+xziN+DL8Q0BU2N17J84FTs1YMOXE/2dXf8DTwV62/5bne0/dmdranzv25uGonfvtepore/p0pXugqw9N2SpuKsuTSuYO7vtjzV1oka1azMqsm50/SYtYxvHNug6blqbRuGpQccDpjYpGzCwauyCmnETJpadjJjwO6teaETz1uHNQjPqfmhPHQC8q/q2Lvj3vyF17cvZvUOqvvkGGAAePO36jTu8q4ZhFvC9Q7PAnxYMzDOxCKjUI/MNs6JfzoECneta8QC2cJ5MVUe9VkzwJerlLD4kZdD4kkk01EJYBFAJG19q4U8BjWcHEME4NGL8gHzmaxBCOQlFMBehCeUy0VAfwyKaz7AJFQ1/OknEkgFki5dUfUYt6MD8IFnaPdKKEtk3DFfVnBdx2gv5TF4Yu6EcXXFHXmLE+Q6TiAfPtMGi7Ya1EhxMGa10UeSY+943XamztDWK+oxa0IH5QbK0e1pcVOXzNwxX1dyRM+J8IZ+pcRi7YQBxle+Dch5ln/MdJhEPnmmDRTNghSGCo7lTRitdnBA45t4o5IfKu+2V298tAfwBGiWwuSZo8KX3YOgfkRnbpgEA') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_1686137_9el2ov99ag.woff?t=1589197045289') format('woff'),
|
||||
url('//at.alicdn.com/t/font_1686137_9el2ov99ag.ttf?t=1589197045289') format('truetype'),
|
||||
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('//at.alicdn.com/t/font_1686137_9el2ov99ag.svg?t=1589197045289#iconfont') format('svg');
|
||||
/* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-guangbozheng-:before {
|
||||
content: "\e640";
|
||||
}
|
||||
</style>
|
||||
@@ -80,11 +80,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDetail, getPrize, takePrize} from "@/api/lottery";
|
||||
import gbroMarquee from "@/components/gbro-marquee/marquee.vue";
|
||||
import { getDetail, getPrize, takePrize } from '@/api/lottery'
|
||||
import gbroMarquee from '../components/gbro-marquee/marquee.vue'
|
||||
|
||||
export default {
|
||||
components: {gbroMarquee},
|
||||
components: { gbroMarquee },
|
||||
data() {
|
||||
return {
|
||||
ready: false,
|
||||
|
||||
Reference in New Issue
Block a user