精华内容
下载资源
问答
  • <view class="nav"> <view class="top-status" :style="{ height: statusHeight + 'px' }"></view> <view class="topbar":style="{ height: navHeight + 'px' }">...<...
    <view class="nav">
        <view class="top-status" :style="{ height: statusHeight + 'px' }"></view>
        <view class="topbar":style="{ height: navHeight + 'px' }"></view>
    </view>
    
    setHeight: function() {
        var sysinfo = uni.getSystemInfo(),
            statusHeight = sysinfo.statusBarHeight,
            isiOS = sysinfo.system.indexOf('iOS') > -1,
            navHeight;
        if (!isiOS) {
            navHeight = 48;
        } else {
            navHeight = 44;
        }
        this.statusHeight = statusHeight;
        this.navHeight = navHeight;
    }
    
    展开全文
  • 微信小程序导航栏/状态栏 .fig素材下载
  • 小程序路由 首先,小程序的路由不同于Vue 等 框架,小程序采用的是 高封装度,低自定义化的方案。 小程序的路由 配置 及其简单,只要不过几行代码 就能搞定 ,毕竟腾讯出品,必属精品(5毛一条,括号内删除) ...

    小程序路由

    首先,小程序的路由不同于Vue 等 框架,小程序采用的是 高封装度,低自定义化的方案。

    小程序的路由 配置 及其简单,只要不过几行代码 就能搞定 ,毕竟腾讯出品,必属精品(5毛一条,括号内删除)

     

    第一步 先建立文件夹

    这里为了方便叫AAAA

    然后创建 内容  也叫 AAAA  注意 这里要选择新建page  注意 这里要选择新建page  注意 这里要选择新建page  重要的事说三遍

    然后App.json 中就自动出现了具体内容

    ps:如果把AAAA 移动到第一行的话 ,进入小程序的首页就会变成 AAAA

      "tabBar": {
        "color": "#a9b7b7",
        "selectedColor": "#11cd6e",
        "borderStyle": "white",
        "list": [
          {
            "selectedIconPath": "./pages/images/t2-h.png",  //选择状态的Icon
            "iconPath": "./pages/images/t2.png",            //未选择状态的Icon
            "pagePath": "pages/AAAA/AAAA",                  //地址
            "text": "AAAA"                                  //标题名
          },
          {
            "selectedIconPath": "./pages/images/t3-h.png",
            "iconPath": "./pages/images/t3.png",
            "pagePath": "pages/event/event",
            "text": "个人"
          }
        ]
      },

    在App.json 最外层加上上面的   tabBar 配置 就好了 看下页面效果

    ps: icon 要自己配置地址和图片

    pss:不要在意上面彩色的顶部栏,这是其他的东西

    psss:tabBar的list里面 至少要有两个页面才行

    展开全文
  • 微信小程序提供的状态栏,只能设置标题,如果想要增加返回按钮和回到主页等按钮操作,只能使用自定义格式替换。 先在app.json 设置导航栏格式为"navigationStyle": "custom"。 "window": { "backgroundTextStyle...

    微信小程序提供的状态栏,只能设置标题,如果想要增加返回按钮和回到主页等按钮操作,只能使用自定义格式替换。

    先在app.json 设置导航栏格式为"navigationStyle": "custom"。

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black",
        "navigationStyle": "custom"
      },

    自定义一个状态栏组件navbar,组件必须要在json文件里面设置"component": true,申明这是一个组件模块。

    <!--components/navbar/navbar.wxml-->
    <view style="height:{{navigationBarHeight}}px;background:white">
      <view style="height:{{statusBarHeight}}px"></view>
      <view class="bar-style">
        <view class="back-style" bindtap="backClick" wx:if="{{back}}">
          <image></image>
        </view>
        <view class="home-style" bindtap="homeClick" wx:if="{{home}}">
          <image></image>
        </view>
        <text class="title">{{title}}</text>
      </view>
    </view>
    /* components/navbar/navbar.wxss */
    
    .bar-style{
      display: flex;
      height: 44px;
      flex-direction: row;
      width: 100%
    }
    
    .back-style, .home-style{
      margin-left: 16rpx;
      justify-content: flex-start;
      width: 56rpx;
      background: green;
      align-items: center;
      display: flex;
      flex-direction: row;
      z-index: 1;
      text-align: center
    }
    
    .title{
      text-align: center;
      font-size: 18px;
      height: 44px;
      position: absolute;
      left: 10px;
      right: 10px;
      text-overflow: ellipsis;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      display: flex
    }
    // components/navbar/navbar.js
    
    const app = getApp()
    
    Component({
    
      /**
       * 组件的属性列表
       */
      properties: {
        title: {
          type: String,
          value: "biaoti"
        },
    
        back:{
          type:Boolean,
          value:false
        },
    
        home:{
          type:Boolean,
          value:false
        },
    
        backhome:{
          type:Number,
          value:0
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        statusBarHeight: app.globalData.statusBarHeight,
        navigationBarHeight: app.globalData.statusBarHeight + 44,
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        backClick:function(){
          console.log("back btn")
        },
    
        homeClick:function(){
          console.log("home btn")
        }
    
      }
    })

    app.js文件里面加入获取状态栏高度。

    globalData: {
        userInfo: null,
        statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] //状态栏高度
      }

     

    在使用时候,在使用page的json文件定义组件路径,或者在全局app.json里面定义,则所有页面都可以使用当前组件。

    "usingComponents": {
        "navbar": "components/navbar/navbar"
      }

    使用组件,组件里面属性为boolean时候,使用需要"back="{{false}}",直接食用back={{false}}不然不会生效,必须要加""。 

    <view >
      <navbar title="标题" back="{{false}}" home="{{false}}"></navbar>
    </view>

     

    展开全文
  • 主要介绍了微信小程序导航滑动定位功能,可实现CSS3的positionsticky效果,涉及微信小程序事件监听、状态判断及属性动态操作相关实现技巧,需要的朋友可以参考下
  • 微信小程序导航栏自定义 实现效果: 微信官方文档中页面配置项: 1.修改页面配置项 "pages": [ { "path" : "pages/home/home", "style" : { "navigationStyle":"custom" } } ] 2.手机状态栏高度自适应 ...

    微信小程序导航栏自定义

    实现效果:
    实现效果
    微信官方文档中页面配置项:
    微信官方文档

    1.修改页面配置项
    "pages": [ 
    	{
            "path" : "pages/home/home",
            "style" : {
    			"navigationStyle":"custom"
    		}
        }
    ]
    
    2.手机状态栏高度自适应
    在App.vue中 用wx.getSystemInfo(Object object)获取系统信息
    <script>
    	export default {
    		onLaunch: function() {
    			console.log('App Launch')
    		},
    		onShow: function() {
    			uni.getSystemInfo({
    				success: (res) => {
    					this.globalData.statusBarHeight = res.statusBarHeight
    				 }
    			})
    		},
    		onHide: function() {
    			console.log('App Hide')
    		},
    		globalData: {
    			statusBarHeight:0
    		},
    	}
    </script>
    
    
    在所需文件内部js中
    <script>
    	const app = getApp();
    	export default{
    		data() {
    			return {
    				statusBarHeight: 0
    			}
    		},
    		onLoad:function(){
    			this.statusBarHeight = getApp().globalData.statusBarHeight
    		}
    	}
    </script>
    
    在所需文件HTML中
    <template>
    	<view class="container">
    		<view class="banContent">
    			<view :style="{'height':statusBarHeight+'px'}"></view>
    			<view class="title">
    				<text>花西子</text>
    			</view>
    		</view>
    	</view>
    </template>
    
    css样式如下
    .banContent {
    	width: 100%;
    	height: 506rpx;
    	background-image: url(自己的图片地址);
    	background-repeat: no-repeat;
    	background-size: cover;
    	text-align: center;
    }
    .title {
    	color: #FFFFFF;
    	font-size: 36rpx;
    	font-weight: 600;
    	padding: 20rpx;
    }
    

    320px
    375px
    刘海屏

    展开全文
  • 微信小程序标签tabBar

    万次阅读 2017-01-13 15:40:12
    微信小程序主页面大部分都定义了底部标签,定义一个标签只需要在app.json里做声明即可,代码如下: "tabBar": {  "color": "black",  "selectedColor": "red",  "borderStyle": "black",  "backgroundColor": ...
  • 微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度 一、微信小程序顶部导航栏自定义 "navigationStyle": "custom" app.json "window": { "backgroundTextStyle": "dark", ...
  • 微信小程序写到到导航还是非常简单得,就算没有三大框架的基础,也是非常容易理解`的。 接下来我们看看他是如何操作的: 以电商页面中常见的导航为例,会了这一种,就是会了很多种,到时根据具体需求改动即可: ...
  • 微信小程序自定义导航,自适应手机屏幕高度(计算微信小程序默认胶囊高度)
  • 微信小程序导航滑动透明度变化

    千次阅读 2020-08-27 15:22:21
    json 中配置: ...-- 自定义状态栏 --> <view class="custom-bar-background" style="opacity:{{navOpacity}};padding-top:{{statusBarHeight}}px"> </view> <view class="custom" s
  • 微信小程序自定义状态栏(一) home.json { "navigationBarTitleText":"北京铭医", "navigationStyle":"custom", "enablePullDownRefresh":true } home.wxml <viewclass="bgImg"> <viewclass=...
  • navigationBarBackgroundColor 导航背景颜色,如”#000000” navigationBarTextStyle 导航标题颜色,仅支持 black/white navigationBarTitleText 导航标题文字内容 官网地址:...
  • 很多小伙伴在微信小程序中使用webview标签的时候肯定会遇到过同样的情况,头部的状态栏和胶囊区会被黑色填充,自己写的header头部组件也无法使用。 如图: 问题的发生原因是因为:该区域为状态栏区域及导航栏...
  • custom表示自定义导航,但会保留右上角胶囊按钮。 window: { // backgroundTextStyle: 'light', // navigationBarBackgroundColor: '#fff', // navigationBarTitleText: 'WeChat', // ...
  • 在把开发工具从stable版改为nightly build版时,原本设定的导航颜色是#0056b9,在程序运行时,开始时变为#0056b9,然后瞬间变为红色??? 重新把开发版更新为稳定版后,问题依旧存在。 解决思路: 导航颜色...
  • 效果展示 Demo源码 index.wxml <mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabCLick" bindchange="onChange" activeClass="tab-bar-title__selected...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,885
精华内容 5,554
关键字:

微信小程序状态栏

微信小程序 订阅