graceScroll.nvue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="grace-scroll-body">
  3. <text class="grace-scroll-msg"
  4. :style="{marginLeft:ml+'px', fontSize:fontSize, fontWeight:fontWeight, color:color}" ref="mainText">{{msg}}</text>
  5. </view>
  6. </template>
  7. <script>
  8. const dom = weex.requireModule('dom');
  9. export default {
  10. props:{
  11. msg : {
  12. type : String,
  13. default : ""
  14. },
  15. fontSize : {
  16. type : String,
  17. default : "26rpx"
  18. },
  19. color : {
  20. type : String,
  21. default : "#333333"
  22. },
  23. fontWeight : {
  24. type : String,
  25. default : ""
  26. }
  27. },
  28. data() {
  29. return {
  30. ml: 0
  31. }
  32. },
  33. created:function(){
  34. setTimeout(()=>{
  35. var el = this.$refs.mainText;
  36. dom.getComponentRect(el, (res) => {
  37. this.animate(res.size.width);
  38. });
  39. }, 500);
  40. },
  41. methods:{
  42. animate : function (w) {
  43. if(this.ml <= w*-1){
  44. this.ml = w;
  45. }else{
  46. this.ml = this.ml - 1;
  47. }
  48. setTimeout(()=>{
  49. this.animate(w);
  50. }, 10);
  51. }
  52. }
  53. }
  54. </script>
  55. <style scoped>
  56. .grace-scroll-body{line-height:60rpx; height:60rpx; overflow:hidden;}
  57. .grace-scroll-msg{line-height:60rpx; height:60rpx; white-space:nowrap; font-size:26rpx;}
  58. </style>