麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

如何實現小程序tab欄下劃線動畫效果

2020-03-21 15:56:20
字體:
來源:轉載
供稿:網友

本文主要介紹了如何實現小程序tab欄下劃線動畫效果,分享給大家,具體如下:

最終效果

小程序,tab,下劃線,動畫

實現

wxml

<view class='abox'>  <view wx:for="{{title}}" class='{{currentIndex==index?"tabTrue":""}}' bindtap='changeTab' data-aa='{{index}}'>   {{item}}    </view>  <view class='b' style="left:{{left}}px"></view></view>

wxss

.abox{ display: flex; flex-direction: row; width: 100%; justify-content: space-around; position: relative; padding-bottom: 20rpx;}.tabTrue{ color: red;}.b{ background: red; height: 4rpx; width:64rpx; position: absolute; bottom: 0; transition: all .3s linear;}

js

Page({ data: {  title: ["首頁","掘金","思否","知乎"],  currentIndex:"0",  left:"" }, changeTab:function(e){  //console.log(e)  this.setData({   currentIndex: e.currentTarget.dataset.aa  })  this.changeline(e)   }, changeline:function(){  const query = wx.createSelectorQuery()  var _this = this  query.select('.tabTrue').boundingClientRect()  query.exec(function (res) {   _this.setData({    left: res[0].left   })   //console.log(res[0].left)  }) }, onLoad: function () {    this.changeline(1)   }})

上面代碼可以實現效果,這里面最重要的就是通過 changeTab方法獲取有tabtrue這個class的標簽,獲取到標簽的left值。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 四虎久草| 国产一级淫片在线观看 | 真人一级毛片免费 | 国产精品久久久久久久亚洲按摩 | 亚洲特黄 | 羞羞电影在线观看www | 久色精品视频 | 午夜视频免费播放 | av成人免费在线观看 | 久久久久一本一区二区青青蜜月 | 热99精品视频 | 欧美一区在线观看视频 | 红桃一区 | 羞羞视频免费网站含羞草 | 亚洲国产视频在线 | 欧美黄 片免费观看 | 特色一级黄色片 | 国产1区2区在线 | 成人宗合网| 桥本有菜免费av一区二区三区 | 红杏亚洲影院一区二区三区 | 欧美成人国产va精品日本一级 | 永久免费黄色大片 | 污污网站入口 | 天天舔天天插 | 国产亚洲精品久久久久久久久久 | va视频| 亚洲第五色综合网 | 污黄视频在线观看 | 97zyz成人免费视频 | 午夜视频在线看 | 久久资源总站 | 久久不射电影网 | 日韩av片网站 | 久久毛片免费 | 国产精品久久久久久久久久久久久久久久 | 一级黄色淫片 | 欧美一级全黄 | 羞羞的视频免费在线观看 | 亚洲第一色片 | 日本视频网 |