小程序自定义导航下标图片

html

<view class="container">
  <!-- tab导航栏 -->
  <!-- scroll-left属性可以控制滚动条位置 -->
  <!-- scroll-with-animation滚动添加动画过渡 -->
  <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
    <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
      <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
        {{navItem.text}}
      </view>

    </block>
  </scroll-view>
  <!-- 页面内容 -->
  <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
    <swiper-item wx:for="{{list}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx"
      class="tab-content">
      {{tabItem.id}}
    </swiper-item>
  </swiper>
</view>

js
 

//index.js
//获取应用实例
const app = getApp()

Page({
    data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        navData:[
            {
                text: '未使用'
            },
            {
                text: '已使用'
            },
            {
                text: '已过期'
            },
        ],
        currentTab: 0,
        navScrollLeft: 0
    },
    //事件处理函数
    onLoad: function () {
        if (app.globalData.userInfo) {
            this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
            })
        } else if (this.data.canIUse) {
            // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
            // 所以此处加入 callback 以防止这种情况
            app.userInfoReadyCallback = res => {
                this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                })
            }
        } else {
            // 在没有 open-type=getUserInfo 版本的兼容处理
            wx.getUserInfo({
                success: res => {
                    app.globalData.userInfo = res.userInfo
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    })
                }
            })
        }


        wx.getSystemInfo({
            success: (res) => {
                this.setData({
                    pixelRatio: res.pixelRatio,
                    windowHeight: res.windowHeight,
                    windowWidth: res.windowWidth
                })
            },
        })       
    },
    switchNav(event){
        var cur = event.currentTarget.dataset.current; 
        //每个tab选项宽度占1/5
        var singleNavWidth = this.data.windowWidth / 5;
        //tab选项居中                            
        this.setData({
            navScrollLeft: (cur - 2) * singleNavWidth
        })      
        if (this.data.currentTab == cur) {
            return false;
        } else {
            this.setData({
                currentTab: cur
            })
        }
    },
    switchTab(event){
        var cur = event.detail.current;
        var singleNavWidth = this.data.windowWidth / 5;
        this.setData({
            currentTab: cur,
            navScrollLeft: (cur - 2) * singleNavWidth
        });
    }
})

css

/* 导航 */
/**index.wxss**/
page{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  /* height: 100%; */
}
.nav {
  height: 90rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #fff;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding-bottom: 10rpx;
}
.nav-item {
  position: relative;
  width: 32%;
  display: inline-block;
  text-align: center;
}
.nav-item.active{
  color: red;
  background-image: url("https://aikesikeapi.youshangwantu.com//UploadFiles/comment/2021051309130602671503.png");
  background-repeat:no-repeat;
  background-size:15% 15%;
  -moz-background-size:15% 15%;
  background-position: bottom;

}
.tab-box{
  /* background: greenyellow; */
  padding-top: 85rpx;
  height: 100%;
  box-sizing: border-box;
}
.tab-content{
  overflow-y: scroll;
}
/* end */