Partage d'exemples de sélection de composants d'applet WeChat

Cet article présente principalement les informations pertinentes sur l'exemple détaillé de chapiteau, le composant d'applet WeChat. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Explication détaillée de l'instance de chapiteau du composant de l'applet WeChat

1 balise de chapiteau

html a le chapiteau. tag , peut obtenir l'effet de sélection, mais pas le mini-programme, il doit donc être implémenté. Pensez à utiliser l'implémentation d'animation CSS3 ici.

Le chapiteau HTML est utilisé comme ceci.

<marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="200" height="50" bgcolor="#0099FF" hspace="10" vspace="10">
   hello world
</marquee>

2.wxml

<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em">
  <view class="marquee_text">{{marquee.text}}</view>
</view>

entrant Le wxml est un objet json

marquee:{
  width:12,
  text:'hello world'
}

et l'étrange --marqueeWidth est la variable transmise à @keyframes. Les variables sont définies en ligne et peuvent également être obtenues dans des fichiers CSS.

3.wxss

@keyframes around {
  from {
   margin-left: 100%;
  }
  to {
   margin-left: var(--marqueeWidth--);// var接受传入的变量
  }
 }

.marquee_container{
 background-color: #0099FF;
 height: 1.2em;
 position: relative;
 width: 100%;
}
.marquee_container:hover{
 animation-play-state: paused; // 不起作用
}
.marquee_text{
 display: inline-block;
 white-space: nowrap;
 animation-name: around;
 animation-duration: 5s;
 animation-iteration-count: infinite;
 animation-timing-function:linear;
}

4. >

Ce qui précède est l'encapsulation des composants.

export default {
 getWidth:(str)=>{
  return [].reduce.call(str, (pre, cur, index, arr) => {
   if (str.charCodeAt(index) > 255) {// charCode大于255是汉字
    pre++;
   } else {
    pre += 0.5;
   }
   return pre;
  }, 0);
 },
 getDuration:(str)=>{// 保留，根据文字长度设置时间
  return this.getWidth()/10;
 }
}

5. Utiliser

Recommandations associées :

// wxml
<include src="../component/marquee/marquee.wxml" />
// wxss
@import "../component/marquee/marquee.wxss";
// js
import marquee from &#39;../component/marquee/marquee.js&#39;;

var options = Object.assign(marquee, {
 data: {
  motto: &#39;Hello World&#39;,
  userInfo: {},
  marquee: { text: &#39;你好，中国！hello,world!&#39; }
 },
 onLoad: function () {
  // ...

  const str = this.data.marquee.text;
  const width = this.getWidth(str);
  console.log(&#39;width&#39;,width);
  this.setData({ [`${&#39;marquee&#39;}.width`]: width });
 }
});
Page(options);

html détaillées introduction à la balise marquee

Résumé des exemples d'utilisation de la balise marquee

Code HTML pur pour compléter l'effet de défilement à travers la balise marquee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!