微信小程序> 小程序自定义顶部导航栏,添加背景图,自定义返回按钮

小程序自定义顶部导航栏,添加背景图,自定义返回按钮

浏览量:520 时间: 来源:weixin_34380948
https://developers.weixin.qq....

全局配置
window
navigationStyle
导航栏样式,仅支持以下值:

  • default 默认样式
  • custom 自定义导航栏,只保留右上角胶囊按钮
小程序代码片段
wechatide://minicode/AMdHRJm27G3I

小程序

设置 navigationStyle
/app.json
{  "pages": [    "index/index",    "index/main",    "index/second",    "index/halfPage"  ],  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle": "black",    "navigationStyle": "custom"  }}
/index/second.wxml
!--index/second.wxml--view class="halfPage"    image mode="top" src="{{bg}}" class="image"/    view class="arrow" bindtap="goback"/view    view class="home"/view/view
/index/second.wxss
/* index/second.wxss */.halfPage{  display: flex;  width: 100vw;  height: 100vh;  background-color: aliceblue;}.image{  position: fixed;  top: 0;  left: 0;  display: flex;  width: 100vw;  height: 30vh;  overflow: hidden;}.arrow{  position: fixed;  left: 40rpx;  top: 73rpx;  display: flex;  width: 35rpx;  height:35rpx;  border-left: 4rpx solid #6dc6ff;  border-top: 4rpx solid #6dc6ff;  transform: rotate(-45deg);}
/index/second.js
// index/second.jsPage({  /**   * 页面的初始数据   */  data: {    bg:'/image/bg.jpg'  },  goback(){    wx.navigateBack({delata:1})  }})
原文链接 https://github.com/WangShuXia...

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎