效果圖：
思路：設定乙個塊用來放置文字，並設定乙個定時器不斷的執行將這個文字塊left進行不斷的-1px（自定義）進行修改。這裡會有乙個定時器的效能問題，所以將定時器放到了乙個run函式，在計時結束之後再次呼叫run函式，並銷毀定時器。這樣就可以做到一邊計時執行函式，一邊不會一直掛著計時器影響效能。ok。
直接上**
scroll_notice.js
/*
*@description: 公告輪播元件
noticetext 文字廣播內容 string
fontcolor 字型顏色 string 預設#6d511e
bgcolor 廣播背景顏色 string 預設#fffbe6
*@author: progerchai
*@date: 2020-02-24 11:19:59
*/import taro from "@tarojs/taro";
import from "@tarojs/components";
import from "taro-ui";
import "../assets/styles/scroll_notice.scss";
export default class fqscrollnotice extends taro.component ;
} state = ;
componentwillmount() = this.props;
this.setstate();
let length = noticetext.length * 14; //文字長度,乙個文字14px
let windowwidth = taro.getsysteminfosync().windowwidth; // 螢幕寬度
this.setstate(, () => );
} run = length => );
} else );
}this.run(length);
clearinterval(counttime);
}, 20);
};render() = this.state;
return (
);}}
this.state.marqueedistance *
2<=
-this.state.windowwidth - this.state.length
3.我這裡設定的引數比較少，只預留了noticetext（輪播文字）, bgcolor（背景色）, fontcolor（文字顏色）。在頁面引入元件之後 ，使用：
noticetext=
"我是輪播公告我是輪播公告我是輪播公告公告"
bgcolor=
"#fffbe6"
fontcolor=
"#6d511e"
>
<
/fqscrollnotice>
```go
/* *@description: 公告輪播元件樣式
*@author: progerchai
*@e-mail: [email protected]
*@date: 2020-02-24 11:21:29
*/.scroll-wrap
.overflow
.left-icon
.font28
.relative
.scroll
.marquee_text
taro標籤 Taro自定義標籤欄TabBar
先講一下taro預設怎麼使用tabbar tabbar from tarojs taro import from tarojs components import index.scss class customtabbar extends component export default custo...
自定義滑動輪播
簡單的滑動輪播沒有下標和自動切換功能 因為專案用的是jq所以就把方法直接掛載到jq上了 廢話不多說直接上code html部分 teachlist class swiper class swiper item class teachimage src div class swiper item cl...
自定義動畫效果
demotitle charset utf 8 src bootstrap js jquery.min.js script div1 style head animateh2 params,speed easing fn p 用於建立自定義動畫的函式。這個函式的關鍵在於指定動畫形式及結果樣式屬性物件...