Beispiel für die gemeinsame Nutzung einer WeChat-Applet-Komponente

小云云
Freigeben: 2018-01-06 10:48:00
Original
3028 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen über das Marquee-Beispiel vorgestellt, die WeChat-Applet-Komponente. Freunde, die sie benötigen, können darauf verweisen.

Detaillierte Erläuterung der Marquee-Instanz der WeChat-Applet-Komponente

1. Marquee-Tag

HTML hat das Marquee Tag kann den Marquee-Effekt erzielen, das Miniprogramm jedoch nicht, daher muss es implementiert werden. Erwägen Sie hier die Verwendung einer CSS3-Animationsimplementierung.

HTML-Laufschrift wird so verwendet.


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

2. wxml


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

eingehend wxml ist ein JSON-Objekt


marquee:{
  width:12,
  text:&#39;hello world&#39;
}
Nach dem Login kopieren

und das seltsame --marqueeWidth ist die Variable, die an @keyframes übergeben wird. Variablen werden inline gesetzt und können auch in CSS-Dateien abgerufen werden.

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;
}
Nach dem Login kopieren

4 >


Das Obige ist die Kapselung von Komponenten.

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;
 }
}
Nach dem Login kopieren

5. Verwenden Sie



Verwandte Empfehlungen:

// 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);
Nach dem Login kopieren

html Detaillierte Einführung in das Marquee-Tag

Zusammenfassung der Verwendungsbeispiele des Marquee-Tags

Reiner HTML-Code zur Vervollständigung des Scrolleffekts durch das Marquee-Tag

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung einer WeChat-Applet-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage