Maison >Applet WeChat >Développement de mini-programmes >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 '../component/marquee/marquee.js'; var options = Object.assign(marquee, { data: { motto: 'Hello World', userInfo: {}, marquee: { text: '你好,中国!hello,world!' } }, onLoad: function () { // ... const str = this.data.marquee.text; const width = this.getWidth(str); console.log('width',width); this.setData({ [`${'marquee'}.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!