蒲公英联盟提供ghost win10,ghost win7,xp,装机纯净版,64位旗舰版,绿色软件,免费软件下载基地!

当前位置:快三内蒙古专家推荐 > 教程 > 服务器类 >

内蒙古快3走势: { data: { motto: 'Hello World'

来源:蒲公英系统┆发布时间:2018-10-30 13:04┆点击:

快三内蒙古专家推荐 www.btfqn.cn 微信小程序组件 marquee实例详解

1. marquee标签

html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现。这里考虑使用css3的animation实现。

html的marquee是这样使用的。

<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>

传入wxml的是个json对象

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

而那个奇怪的--marqueeWidth是给@keyframes传的变量。内联设置变量,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. js

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. 使用

// wxml <include src=//www.3lian.com/edu/2017/06-24/"../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);

尚未注册畅言帐号,请到后台注册
  • 生命时报2016年两会特别策划 2019-05-19
  • 【专题】河北省人民政府新闻发布会 2019-05-18
  • 西安,给盲人朋友留一条路吧…无障碍设施盲道-编辑整合 2019-05-15
  • 哈哈。。。,仙姑,你喜歡貓? 2019-05-15
  • 联播快讯:俄罗斯世界杯国际广播中心启用 2019-05-09
  • (清仓)德国埃丝伯爵黑啤酒500ml【价格 品牌 图片 评论】 2019-05-08
  • 家装行业猫腻多:“低价全包”变身“加价全包” 2019-05-07
  • 端午三件套了解一下!这些小知识让你端午更健康 2019-05-07
  • 爱因斯坦日记曝光:担心中国人可能会取代所有其他种族 2019-05-06
  • 2017年第96届全国糖酒会在成都圆满落幕 2019-05-03
  • 特稿:邻望邻好同发展——中国改革开放的亚太故事 2019-05-03
  • 中巴建交一周年 一系列庆祝活动在巴拿马举行 2019-04-25
  • 习近平作报告全场71次掌声 此处最密、此处最长(附原音) 2019-04-24
  • 太平财险湖北分公司成功续保东风乘用车财产险项目 2019-04-21
  • 百姓故事:蒋姐姐的旗袍人生 2019-04-21
  • 533| 566| 638| 84| 309| 939| 616| 34| 592| 275|