微信小程序动态改变胶囊颜色

微信小程序动态改变胶囊颜色

2021-08-13 560
下载不了?请联系网站客服提交链接错误!
增值服务:
微信小程序动态改变胶囊颜色
最近更新 2021年08月13日
资源编号 86676

微信小程序动态改变胶囊颜色

2021-08-13 小程序教程 0 560 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

看别人的项目有这样一种设定,一进来没有导航栏只有返回按钮,胶囊颜色为黑色半透明,等滑动到一定高度以后导航栏出现,胶囊变成白色。
需要在js里面用到 wx.setNavigationBarColor,它有两个参数一起设定可以改变胶囊颜色,需要注意颜色要用十六进制

  • 当胶囊为黑色半透明

wx.setNavigationBarColor({
      backgroundColor:\'#ffffff\',
      frontColor:\'#ffffff\',
})
  • 当胶囊为白色

wx.setNavigationBarColor({
      backgroundColor:\'#000000\',
      frontColor:\'#000000\',
})

如果是指定页面胶囊颜色,之后不做改变,可以直接在json文件里面配置:

  • 胶囊为白色

{
  \"navigationBarTextStyle\": \"black\",  
}
  • 胶囊为黑色半透明

{
  \"navigationBarTextStyle\": \"white\",  
}

附带监听页面滚动,滑动到某一节点位置时改变胶囊颜色的方法:

onPageScroll(e){
     let query = wx.createSelectorQuery()
     let that = this
     query.select(\'.d-content\').boundingClientRect(function(rect){
      // 滑动到此节点高度值+100的位置显示导航栏,胶囊为白色
       if(e.scrollTop > rect.top + 100){  
         that.setData({
          showNav: true
         })
         wx.setNavigationBarColor({
          backgroundColor:\'#000000\',
          frontColor:\'#000000\',
        })
       }else{
        // 否则隐藏导航栏,胶囊为黑色半透明
         that.setData({
          showNav: false
         })
         wx.setNavigationBarColor({
          backgroundColor:\'#ffffff\',
          frontColor:\'#ffffff\',
        })
       }
     }).exec()
  },

我用的是自定义导航栏,需要在json里面配置一下:

{
  \"navigationStyle\": \"custom\"
}

在app.js里面设置全局变量navHeight,动态计算导航栏高度:

globalData: {
    userInfo: null,
    navHeight: 0
  }

onLaunch里面:

wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
})

需要自定义导航栏页面的wxml文件:

<view class=\'nav bg-white\' wx:if=\"{{showNav}}\" style=\'height:{{navH}}px\'>
    <view class=\'nav-title\'>
      <text class=\"iconfont icon-fanhui\"></text>
      {{navTitle}}
    </view>
  </view>

js文件:

const App = getApp();

Page({
 data: {
   navH:0,
   showNav:false,
  },
  onLoad: function (options) {
    this.setData({
      navH: App.globalData.navHeight
    })
   wx.setNavigationBarColor({
      backgroundColor:\'#ffffff\',
      frontColor:\'#ffffff\',
    })
  },
})

wxss文件:

.nav{
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.nav-title{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-family:PingFang-SC-Medium;
  font-size:36rpx;
  letter-spacing:2px;
}
.bg-white{
  background: white;
}
.icon-fanhui{
  position: absolute;
  left: 30rpx;
}

再调用监听页面滚动的方法就能动态显示隐藏导航栏。

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 微信小程序动态改变胶囊颜色 https://www.k4sc.com/86676.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务