公告水平滚动数组支持点击单个

重在思维：1.在最外成使用css滚动，2.在其子级内部便利出公告数组并设置右内边距 边距设置为公告盒子宽度，从而达到公告水平列表滚动

<template>
    <view class="t-notice-bar">
        <view class="t-direction-row">
            <view class="t-notice-box" id="t-notice-box">
                <view class="t-notice-content" id="t-notice-content" :style="{
						animationDuration: animationDuration,
						animationPlayState: animationPlayState,
					}">
                    <text class="t-notice-text"  v-for="(item,index) in list" :key="index" :style="index+1 ==list.length ? 'padding-right:0px;':''" @click="onNotice(index)">{{item}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'proclamation',
        props: {

            // 显示的内容，数组
            list: {
                type: Array,
                default: () => []
            },
            // 是否自动播放
            autoplay: {
                type: Boolean,
                default: true
            },
            // 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
            speed: {
                type: [Number, String],
                default: 140
            }  
        },
        data() {
            return {
                textWidth: 0, // 滚动的文字宽度
                animationDuration: '1s', // 动画执行时间
                animationPlayState: 'paused', // 动画的开始和结束执行
                showText: '' // 显示的文本
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initSize();
            });
            console.log('轮播数据-------------------', this.list)
        },
        watch: {
            list: {
                immediate: true,
                handler(val) {
                    this.showText = val.join('，');
                    this.$nextTick(() => {
                        this.initSize();
                    });
                }
            },
            speed(val) {
                this.initSize();
            }
        },
        methods: {
            initSize() {
                let query = [],
                    textWidth = 0;
                let textQuery = new Promise((resolve, reject) => {
                    uni.createSelectorQuery()
                        .in(this)
                        .select(`#t-notice-content`)
                        .boundingClientRect()
                        .exec(ret => {
                            this.textWidth = ret[0].width;
                            resolve();
                        });
                });
                query.push(textQuery);
                Promise.all(query).then(() => {
                    this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`;
                    this.animationPlayState = 'paused';
                    setTimeout(() => {
                        if (this.autoplay) this.animationPlayState = 'running';
                    }, 10);
                });
            },


            onNotice(e) {
                console.log('666600--', e)
                this.$emit('onNotice', e);
            },

            scroll() {
                this.left = 0;
                console.log('触发到底')
            }
        }
    }
</script>
<style  scoped>

.t-notice-bar {
    height: 100%;
	overflow: hidden;
	color:#fff;
    align-items: center;
    display: flex;
}

.t-direction-row {
    width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}


.t-notice-box {
	flex: 1;
	display: flex;
	flex-direction: row;
	overflow: hidden;
    width: 100%;
}

.t-notice-content {
	animation: loop-animation 10s linear infinite both;
	text-align: right;
	/* // 这一句很重要，为了能让滚动左右连接起来 */
	padding-left: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	
}

.t-notice-text {
	font-size: 30rpx;
	word-break: keep-all;
	white-space: nowrap;
    
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    padding-right: 550rpx;
}

@keyframes loop-animation {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
</style>