【小程序自定义组件，冒泡，自定义导航栏，页面栈】

自定义组件

在根目录新建一个components的文件夹----新建一个文件夹post----新建一个compont文件也叫post
创建完之后 post.json就自动配置好了

{"component": true,    //他就是组件"usingComponents": {}
}

3.然后写wxml、js、ss等

函数要写在methods里面
变量要写在properties

 properties: {item:{type:Object,value:{}}},

4.在父组件中的index.json 里面添加注册组件路由和起别名

{"usingComponents": {"post":"/components/post/post"}
}

5.在父组件中要引入子组件的地方使用，用刚才注册路由的名称

如果有用到变量的地方要写，如下面的item这样，和上面子组件中的 properties

<block wx:for="{{postList}}" wx:key="id"><post item="{{item}}"></post>
</block>

自定义组件冒泡

如果组件中根标签注册单击事件和里面嵌套的标签中也注册了事件，则里面的会有事件冒泡

<view class="post-container" data-id="{{item.id}}" bind:tap="goDatail"><!-- 头像和发表时间 --><view class="post-author-date"><image class="post-author" src="http://test.imgurl.org/imgs/2022/05/27/24355bbda1c1a39e.jpg"></image><text class="post-date">{{item.pubdate}}</text></view><!-- 标题 --><text class="post-title">{{item.title}}</text><!-- 封面图片 --><view class="post-image-wrap"><image data-img="{{item.cover_img}}" bind:tap="previewImg" wx:if="{{item.cover_type===1}}" class="post-image-one" src="{{item.cover_img}}"></image><image bind:tap="previewImg" data-img="{{item.cover_img}}" wx:if="{{item.cover_type===3}}" wx:key="index" wx:for-item="imgItem" wx:for="{{item.cover_img}}" class="post-image-three" src="{{imgItem}}"></image></view><!-- 简介 --><view class="post-desc">{{item.desc}}</view><!-- 收藏和评论数量 --><view class="post-like"><!-- <image class="post-like-image iconfont icon-shoucang"></image> --><text class="post-like-image iconfont icon-shoucang"></text><text class="post-like-font">99</text><text class="post-like-image iconfont icon-pinglun"></text><!-- <image class="post-like-image"></image> --><text class="post-like-font">{{item.comm_count}}</text></view>
</view>

解决自定义事件冒泡把bind换成 catch就可以了！！！

 <!-- 封面图片 --><view class="post-image-wrap"><image data-img="{{item.cover_img}}" catch:tap="previewImg" wx:if="{{item.cover_type===1}}" class="post-image-one" src="{{item.cover_img}}"></image><image catch:tap="previewImg" data-img="{{item.cover_img}}" wx:if="{{item.cover_type===3}}" wx:key="index" wx:for-item="imgItem" wx:for="{{item.cover_img}}" class="post-image-three" src="{{imgItem}}"></image></view>

导航栏

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。	iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持

在根目录的app.json 中添加 window

{"pages": ["page/welcome/welcome","page/index/index","page/detail/detail"],"entryPagePath": "page/index/index","sitemapLocation": "sitemap.json","window": {"navigationBarBackgroundColor": "#623654", //导航栏的背景颜色"navigationBarTextStyle": "black", //导航栏的字体颜色   #这里只能写黑色和白色"navigationBarTitleText": "title"//导航栏的内容}
}

如果想配置每个页面的导航栏都不一样

那么就在每个页面的json文件中添加属性，不用加上window
页面的配置会覆盖全局的配置

{"usingComponents": {},"navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black","navigationBarTitleText": "天天头条-首页"
}

自定义导航栏 navigationStyle

需要把默认的给删除。或者注释！！！

在app.json 中

"window": {"navigationStyle":"custom"}

然后就自己定义一个view，设置样式

<view class="nav">自定义导航条</view>

.nav{background-color: orange;color: #000;line-height: 40px;text-align: center;
}

可以只给某个页面自定义导航栏，别的就是默认的 navigationStyle

切记，想给那个页面加，就有在json中添加, "navigationStyle":"custom"属性！！！组件也是

在app.wxss里面编写的代码所有的页面都会生效！！！但是不包括组件！！！

解决：

在想引用的页面在引入一次

页面栈

栈相当于一个数组，入栈是添加数组中，出栈是删除，踢出去。。。

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	触发时机
初始化	新页面入栈	小程序打开的第一个页面
打开新页面	新页面入栈	wx.navigate To
页面重定向	当前页面出栈，新页面入栈	wx.redirectTo
页面返回	页面不断出栈，直到目标返回页	wx.navigateBack
Tab 切换	页面全部出栈，只留下新的 Tab 页面	wx.switchTab
重加载	页面全部出栈，只留下新的页面	wx.reLaunch

开发者可以使用 `getCurrentPages()` 函数获取当前页面栈

页面返回 wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

属性	类型	默认值	必填	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页。

goBack(){wx.navigateBack({delta: 1,//参数是几就返回几级，默认是1})}
//如果有100个页面，想返回100级就是返回的首页

自定义导航栏高度

http://qiniu.yaoyao.info/20220528192836.png
目的是为了，让自定义的内容和胶囊按钮垂直居中

获取状态栏高度

// 获取状态栏高度
const system = wx.getSystemInfoSync().statusBarHeight

获取胶囊按钮的高度

// 获取胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
//获取胶囊按钮高度
const menuButtonInfo = wx.getMenuButtonBoundingClientRect().height
//获取胶囊按钮距离导航栏顶部的高度
const menuButtonInfo = wx.getMenuButtonBoundingClientRect().top

导航栏的高度

//获取导航栏的高度const statusHeigth=menuButton.height+(menuButton.top-system.statusBarHeight)*2//胶囊按钮的高度+（胶囊按钮距离状态栏顶部的高度-状态栏的高度）的两倍//胶囊按钮距离状态栏顶部的高度-状态栏的高度 这个是胶囊和导航栏的上边距，乘以2是下边距

计算自定义导航栏的高度

//自定义导航栏高度const placeHolderHeight=system.statusBarHeight+navBarHeigth//状态栏高度+导航栏高度

把整体所有的加起来就是整个自定义导航栏的高度，把padding-top设置成状态栏的高度

完整代码

data: {statusBarHeight:0,//手机（真机）状态栏的高度placeHolderHeight:0,//自定义导航栏的高度(整个)navBarHeigth:0,//导航栏的高度},ready(){//获取状态栏高度的信息const system=wx.getSystemInfoSync()const statusBarHeight=system.statusBarHeight// console.log(system)//获取胶囊按钮的信息const menuButton=wx.getMenuButtonBoundingClientRect()// console.log(menuButton)//获取导航栏的高度const navBarHeigth=menuButton.height+(menuButton.top-system.statusBarHeight)*2//自定义导航栏高度const placeHolderHeight=statusBarHeight+navBarHeigththis.setData({statusBarHeight:statusBarHeight,placeHolderHeight:placeHolderHeight,navBarHeigth:navBarHeigth})},

建议把自定义导航栏里面获取手机的高度，状态栏的高度，胶囊的高度等放在app.js中

小程序一启动就会执行app.js中的代码，并且只会执行一次
app.js里面的钩子函数，onLaunch只会执行一次
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。

//app.js
App({globalData:{statusBarHeight:0,//手机（真机）状态栏的高度placeHolderHeight:0,//自定义导航栏的高度navBarHeigth:0,//导航栏的高度},onLaunch(){//获取状态栏高度的信息const system=wx.getSystemInfoSync()const statusBarHeight=system.statusBarHeight// console.log(system)//获取胶囊按钮的信息const menuButton=wx.getMenuButtonBoundingClientRect()// console.log(menuButton)//获取导航栏的高度const navBarHeigth=menuButton.height+(menuButton.top-system.statusBarHeight)*2//自定义导航栏高度const placeHolderHeight=statusBarHeight+navBarHeigththis.globalData.statusBarHeight=statusBarHeightthis.globalData.placeHolderHeight=placeHolderHeightthis.globalData.navBarHeigth=navBarHeigth}
})

在nav组件中使用

/nav.js
const app=getApp()//获取全局App实例
data: {statusBarHeight:app.globalData.statusBarHeight,//手机（真机）状态栏的高度placeHolderHeight:app.globalData.placeHolderHeight,//自定义导航栏的高度navBarHeigth:app.globalData.navBarHeigth,//导航栏的高度},/app.globalData.statusBarHeight在模板中不能直接这样赋值

如果想在别的页面也使用globalData中的变量

需要在页面js中创建变量获取app实例
创建data中的变量
在页面模板中使用

//index.js
const app=getApp()
data: {placeHolderHeight:app.globalData.placeHolderHeight,//自定义导航栏的高度},
//index.wxml
style="top: {{placeHolderHeight}}px;"

类别导航栏的高度

/index.js
navHeight:40,

整体的代码

/index.js
// page/index/index.js
const app=getApp()
import request from '../../utils/api/http'
Page({/*** 页面的初始数据*/data: {placeHolderHeight:app.globalData.placeHolderHeight,//自定义导航栏的高度navHeight:40,imgUrlList: ['http://test.imgurl.org/imgs/2022/05/27/24355bbda1c1a39e.jpg','http://test.imgurl.org/imgs/2022/05/27/3f4adbc017df35fa.jpg','http://test.imgurl.org/imgs/2022/05/27/684313636e90c8b2.jpg'],postList: [],cateList:[],//用来存储所有的类别activeView:'demo1',//当前激活的scroll-view中的子元素的idactiveCateId:1,//当前激活的类别id
},
/*** 生命周期函数--监听页面加载*/onLoad(options) {//1.获取所有的类别this.getAllCate()//2.根据类别获取咨询this.getNewsByCate()},//获取所有类别async getAllCate(){const res=await request({url:'http://minipro.daqitc.net/cate/all'})this.setData({cateList:res.data.data})},//根据类别获取咨询async getNewsByCate(){const res=await request({url: `http://minipro.daqitc.net/news/all/${this.data.activeCateId}`,data: {page: 1,pageSize: 10},})this.setData({postList: res.data.data.result})},//切换类别changeCate(event){// console.log('111')//1.获取点击的view的idconst id=event.currentTarget.dataset.id//2.获取点击的类别idconst cateId=event.currentTarget.dataset.cateidthis.setData({activeView:id,activeCateId:cateId})//切换类别后重新根据类别请求数据this.getNewsByCate()},
})

/index.wxml
<nav></nav>
<!-- 水平类别导航 -->
<scroll-view class="scroll-view_H"  scroll-with-animation="{{true}}" scroll-into-view="{{activeView}}" scroll-x="true" style="width:100%;top: {{placeHolderHeight}}px;height: {{navHeight}}px;"><view id="demo{{item.id}}" data-cateid="{{item.id}}" data-id="demo{{item.id}}" bind:tap="changeCate" class="scroll-view-item_H {{activeCateId===item.id?'active':''}} " wx:key="id" wx:for="{{cateList}}">{{item.name}}</view>
</scroll-view>
<!-- 轮播图 -->
<!-- <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="2000"><block wx:for="{{imgUrlList}}" wx:key="index"><swiper-item><image src="{{item}}"></image></swiper-item></block></swiper> -->
<!-- 新闻列表 -->
<view class="news-wrap" style="margin-top:{{navHeight+placeHolderHeight}}px"><block wx:for="{{postList}}"  wx:key="id"><post item="{{item}}"></post></block>
</view>
<!-- <view class="container">
</view> -->

/index.wxss
/* swiper image{height: 100%;width: 100%;
} */
/* 水平滑动导航 */
.scroll-view_H{white-space: nowrap;position: fixed;/* top: 60px; */left: 0;padding: 10rpx 0;box-sizing: border-box;background-color: #ddd;
}

.scroll-view-item_H{display: inline-block;/* width: 100%; */padding: 0 10px;
}
/* 类别激活的样式 */
.active{color: red;
}
/* 咨询列表样式 */

.post-container{display: flex;flex-direction: column;padding: 10px;
}
.post-author-date{display: flex;align-items: center;
}
.post-author{width: 60rpx;height: 60rpx;border-radius: 50%;
}
.post-date{margin-left: 15px;font-size: 26rpx;
}
.post-title{font-size: 34rpx;font-weight: 600;margin-bottom: 20rpx;/* margin-left: 20rpx; */color: #333;
}
.post-imag-wrap{display: flex;justify-content: space-between;
}
.post-image-one{width: 100%;height: 240rpx;margin-bottom: 30rpx;
}
.post-image-three{width: 33%;height: 240rpx;margin-bottom: 30rpx;
}
.post-desc{color: #666;font-size: 28rpx;margin-bottom: 20rpx;line-height: 40rpx;letter-spacing: 2rpx;
}
.post-like{display: flex;flex-direction: row;align-items: center;margin-left: 20rpx;
}
.post-like-image{margin-right: 16rpx;
}
.post-like-font{margin-right: 40rpx;font-size: 26rpx;
}

【小程序自定义组件，冒泡，自定义导航栏，页面栈】相关推荐

微信小程序开发笔记二—底部导航栏tabar
文章目录一.实现效果二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件三.注意事项一.实现效果首先展示一下实现效果底部导航栏有三个按键 ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
【微信小程序】学习笔记-----navigation-bar导航栏
微信官方文档----小程序微信小程序底部的导航栏不需要自己画,通过配置即可先配置list数组,tab的列表在app.json中与其他项平级,当输入tabBar的时候会自动填补齐全,这里要注意,控 ...
微信小程序带吸顶效果的导航栏
有时候做微信小程序商城的时候要做可以左右滑动又有吸顶效果的导航栏,最近刚做过一个,不多说直接上代码. .wxml <view class="limit_save fix-save&qu ...
【微信小程序创作之路】- 小程序窗口整体配置（导航栏、标题）
[微信小程序创作之路]- 小程序窗口导航栏配置第五章微信小程序窗口导航栏配置文章目录 [微信小程序创作之路]- 小程序窗口导航栏配置前言一.入口文件的配置二.页面配置三.全局默认窗口配置 ...
微信小程序学习笔记（自定义组件）
自定义组件开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码掩护.自定义组件在使用是与基础组件非常相似. 创建自定义组件 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
【微信小程序】组件的生命周期及自定义组件
文章目录组件的生命周期自定义组件的生命周期函数执行顺序组件常用的生命周期函数 lifetimes节点组件所在页面的生命周期函数 pageLifetimes节点自定义组件创建自定义组件创 ...

【小程序自定义组件，冒泡，自定义导航栏，页面栈】

自定义组件

自定义组件冒泡

解决自定义事件冒泡把bind换成 catch就可以了！！！

导航栏

如果想配置每个页面的导航栏都不一样

自定义导航栏 navigationStyle

可以只给某个页面自定义导航栏，别的就是默认的 navigationStyle

切记，想给那个页面加，就有在json中添加, "navigationStyle":"custom"属性！！！组件也是

页面栈

开发者可以使用 `getCurrentPages()` 函数获取当前页面栈

页面返回 wx.navigateBack

自定义导航栏高度

http://qiniu.yaoyao.info/20220528192836.png

建议把自定义导航栏里面获取手机的高度，状态栏的高度，胶囊的高度等放在app.js中

【小程序自定义组件，冒泡，自定义导航栏，页面栈】相关推荐

最新文章

热门文章

【小程序自定义组件，冒泡，自定义导航栏，页面栈】

自定义组件

自定义组件冒泡

解决自定义事件冒泡 把bind换成 catch就可以了！！！

导航栏

如果想配置每个页面的导航栏都不一样

自定义导航栏 navigationStyle

可以只给某个页面自定义导航栏，别的就是默认的 navigationStyle

切记，想给那个页面加，就有在json中添加, "navigationStyle":"custom"属性！！！组件也是

页面栈

开发者可以使用 getCurrentPages() 函数获取当前页面栈

页面返回 wx.navigateBack

自定义导航栏高度

http://qiniu.yaoyao.info/20220528192836.png

建议把自定义导航栏里面获取手机的高度，状态栏的高度，胶囊的高度等放在app.js中

【小程序自定义组件，冒泡，自定义导航栏，页面栈】相关推荐

最新文章

热门文章

解决自定义事件冒泡把bind换成 catch就可以了！！！

开发者可以使用 `getCurrentPages()` 函数获取当前页面栈