предисловие
Это требование такое же, как и в заголовке, вообще говоря, данные комментария к статье отображаются в виде заграждения над первой картинкой статьи. В то время, когда я выполнял это требование, я потратил много сил и наступил на много ям.Сейчас я напишу реализацию идеи барража.Если вам это нравится, вы можете поставить лайк/подписаться и поддержите его.Надеюсь, вы сможете прочитать эту статью.
Личный блог, чтобы узнать:obkoro1.com
Осознайте эффект:
Принцип реализации:
Принцип реализации заграждения не слишком сложен, это занимает некоторое время, и это должно быть возможно сделать.
- Получите данные экрана пули.
- Установите заграждение на четыре канала, и каждый канал может отображать не более двух заграждений.
- использовать
setIntervalДинамические настройкиdomизleftАтрибуты. - используя дом
offsetWidthи ширину экрана, чтобы определить, прокручивается ли элемент за пределы экрана, а затем удалить dom.
Этапы реализации:
1. Первый взглядhtmlСтруктура.
<div class="detailImg">
<img src="url"/>
<div id="barrageDiv">
<div id="barrageLayer1"></div>
<div id="barrageLayer2"></div>
<div id="barrageLayer3"></div>
<div id="barrageLayer4"></div>
</div>
</div>
<!--detailImg 设置relative， barrageDiv设置z-index在图片上面，以及图片的位置-->
<!---barrageLayer1~4 主要设置了一个top属性让四个div在各自的水平线上，形成四个通道->
По поводу стиля css здесь ключевые моменты указаны выше, просто обратите внимание на то, как формируется вышеуказанный канал, и все. Конкретный стиль не будет опубликован, просто приходите в соответствии со своими потребностями.
2. Получите данные, необходимые для заграждения.
Чтобы добиться заградительного эффекта, у вас должны быть данные, и вот запрос.
При получении данных,Учитывая количество данных, невозможно получить их все за один раз, вы можете получить часть за раз, а когда данные должны быть загружены, снова запросить данные.
здесь, чтобыВсе ли запрошенные данные записи завершены, если запрос выполнен, дальнейшая отправка данных невозможна, а все данные, полученные ранее, можно использовать напрямую.
3. Выполнить функцию заграждения.
После получения данных заграждения выполняется функция операции заграждения, потому что когда я писал функцию заграждения, я задавал много состояний данных.Здесь я кратко расскажу об идеях реализации и ключевых частях кода.
Функция заграждения включает в себя следующие функции:
-
Регулярно получать данные (оценивая, загружаются ли данные)
-
Своевременно запускать шквал (судя о том, свободен ли канал), передавать требуемый шквал контент, аватар пользователя и т.д.
-
Создайте содержимое dom, сгенерируйте div чата в соответствии с переданными параметрами, установите атрибут стиля и вставьте div в соответствующий dom в соответствии с нижним индексом массива данных контрольного чата.
-
Используйте таймер для перемещения купола, здесь нужно определить скорость движения экрана пули в соответствии с длиной содержимого.
-
В процессе перемещения заграждения оценивается, находятся ли четыре канала в состоянии ожидания.Когда дом перемещается за пределы экрана, дом перемещается и таймер сбрасывается.
function barrage(){ //第一部分先判断数据是否加载完成 这里是一个定时器，设置为15秒。 //如果数据还未加载完毕，就再次运行请求数据的接口，请求的页数可以 数组/每次请求的条数+1 //数据加载完毕就清除定时器。（我将定时器都保存在vue 组件的data里面） 清除的时候clearInterval(this.data); //定时发射 _this.barrageStatus.divStatus.intervalid=setInterval( selfTime,1100); function selfTime() { if(_this.dataNum>=_this.barrageStatus.data.length){ //当dataNum大于等于数组的数量时，弹幕从头再来一遍 _this.dataNum=0; } //设置四个通道的变量，当这几个变量为false的时候，才可发射 if(divStatus.div1===false){ //这里只演示其中一个变量 divStatus.div1=true; _this.dataNum++; return barrageOut(_this.barrageStatus.data[_this.dataNum-1].content,_this.barrageStatus.data[_this.dataNum-1].commentator.headImgUrl,_this.dataNum); } }; // 创建弹幕内容，自定义弹幕移动速度 function barrageOut(text,imgUrl,num) { //text：弹幕的内容,imgUrl:用户的头像,num:数组的第几个 if(num%4==1){ //根据数组下标 创建对应通道的节点 这里也演示其中一个 barrageLayer=document.getElementById('barrageLayer1'); } // 创建dom内容 定义dom style样式 let divBox = document.createElement('div'); let divBoxImg=document.createElement('span'); let divBoxText=document.createElement('span'); divBox.setAttribute('class','barrageDivClass'); divBoxText.innerHTML=text; divBox.appendChild(divBoxImg); divBoxImg.setAttribute('class','barrageDivClass_img'); divBoxImg.style.backgroundImage=`url(${imgUrl})`; divBox.appendChild(divBoxText); divBox.style.left=document.body.clientWidth+2000+'px';// 初始化left位置,一开始在屏幕的右侧 barrageLayer.appendChild(divBox); // 定时器移动dom，形成弹幕 let time,l=0; time= setInterval(function(){ if(text.length<15){ // 这里可以根据需求自定义弹幕加载的速度 l=l-1; }else{ l=l-2; } //通过减少left属性移动这个div 从右往左移动 divBox.style.left = document.body.clientWidth+l+'px'; let delDiv=()=>{ if(num%4==1){ //在移动弹幕的过程中判断四个通道是否处于闲置状态 这里只演示其中一个 barrageLayer=document.getElementById('barrageLayer1'); if(barrageLayer.childNodes.length<2){ //判断弹幕数量，如果小于2，设为false，上面的定时器可以继续发射弹幕 divStatus.div1=false; }else{ divStatus.div1=true; } } } } if( l <= (0-divBox.offsetWidth-120) ){ if(_this.barrageStatus.divStatus.switch==true){ //弹幕开关 delDiv(); if(l <= (0-divBox.offsetWidth-document.body.clientWidth) ){ //不断减少left属性，当小于这个内容的宽度,并且滚了120的时候 barrageLayer.removeChild(divBox); //移除dom clearInterval(time);//清除这个div的定时器 } }else{ clearInterval(time);//清除这个div的定时器 } } },20) } }
Эпилог
Я реализовал это требование заграждения, как указано выше. Оглядываясь назад на реализацию, я обнаружил, что есть еще много мест, которые можно оптимизировать и разделить. Если есть лучшие идеи реализации и какие ошибки в этой статье, пожалуйста, оставьте сообщение в область комментариев.
Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.
Наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки.
личный блог and Персональная домашняя страница Nuggets
Подпишитесь на мой номер подписки, чтобы учиться и расти вместе.
Выше 2018.4.29