中国做网站最好的公司,郑州网站建设目标,房地产怎么做网站推广,科技公司网站模版进入下面小程序可以体验效果#xff1a; 至于原理的话#xff0c;解释起来毕竟麻烦#xff0c;各位可以看源码自己分析。其实很简单#xff0c;就算计算布局。很多网上公布的布局#xff0c;都不能正常自适应。在下这个是完美可以的
1、WXML
view classweui…
进入下面小程序可以体验效果 至于原理的话解释起来毕竟麻烦各位可以看源码自己分析。其实很简单就算计算布局。很多网上公布的布局都不能正常自适应。在下这个是完美可以的
1、WXML
view classweui-navigation-bar {{extClass}}view classweui-navigation-bar__inner {{ios ? ios : android}} stylecolor: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}}!-- 左侧按钮 --view classweui-navigation-bar__left style{{leftWidth}};{{marginLeft}};{{Jheight}}block wx:if{{back || homeButton}}!-- 返回上一页 --block wx:if{{back}}view classweui-navigation-bar__buttons weui-navigation-bar__buttons_goback bindtapbackimage srcdata:image/png;base64,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 classweui-navigation-bar__button weui-navigation-bar__btn_goback/image/view/blockview classshu-pview classshu/view/view!-- 返回首页 --block wx:if{{homeButton}}view classweui-navigation-bar__buttons weui-navigation-bar__buttons_home bindtaphomeimage srcdata:image/png;base64,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 classweui-navigation-bar__button weui-navigation-bar__btn_home/image/view/block/block/view!-- 标题 --view classweui-navigation-bar__centerview wx:if{{loading}} classweui-navigation-bar__loading aria-rolealertviewclassweui-loadingaria-roleimgaria-label加载中/view/viewblock wx:if{{title}}text{{title}}/text/blockblock wx:elseslot namecenter/slot/block/view!-- 右侧留空 --view classweui-navigation-bar__rightslot nameright/slot/view/view
/view2、WXSS
.weui-navigation-bar {--weui-FG-0:rgba(0,0,0,.9);--height: 44px;--left: 16px;
}
.weui-navigation-bar .android {--height: 48px;
}.weui-navigation-bar {overflow: hidden;color: var(--weui-FG-0);flex: none;
}.weui-navigation-bar__inner {position: relative;top: 0;left: 0;height: calc(var(--height) env(safe-area-inset-top));display: flex;flex-direction: row;align-items: flex-start;justify-content: center;padding-top: env(safe-area-inset-top);width: 100%;box-sizing: border-box;
}.weui-navigation-bar__left {position: relative;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;border-radius:50px;border:1rpx solid #d2d2d2;background:#ffffff4a;margin-left: 15rpx;
}.shu-p{width: 50%;height: 50%;display: flex;align-items: center;justify-content: center;margin: 5rpx;
}.shu{border: 1rpx solid #cececec7;width: 1%;height: 100%;
}.weui-navigation-bar__btn_goback_wrapper.weui-active {opacity: 0.5;
}.weui-navigation-bar__btn_goback {width: 55rpx;height: 55rpx;
}.weui-navigation-bar__buttons_goback{margin-top: -5rpx;width: 100%;display: flex;justify-content: flex-end;
}.weui-navigation-bar__buttons_home{width: 100%;
}.weui-navigation-bar__btn_home_wrapper.weui-active {opacity: 0.5;}.weui-navigation-bar__btn_home {width: 45rpx;height: 45rpx;}.weui-navigation-bar__center {font-size: 17px;text-align: center;position: relative;display: flex;flex-direction: row;align-items: center;justify-content: center;font-weight: bold;flex: 1;height: 100%;
}.weui-navigation-bar__loading {margin-right: 4px;align-items: center;
}.weui-loading {font-size: 16px;width: 16px;height: 16px;display: block;background: transparent url(data:image/svgxml,%3C%3Fxml version1.0 encodingUTF-8%3F%3E%3Csvg width80px height80px viewBox0 0 80 80 version1.1 xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlink%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x194.0869141%25 y10%25 x294.0869141%25 y290.559082%25 idlinearGradient-1%3E%3Cstop stop-color%23606060 stop-opacity0 offset0%25%3E%3C/stop%3E%3Cstop stop-color%23606060 stop-opacity0.3 offset100%25%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1100%25 y18.67370605%25 x2100%25 y290.6286621%25 idlinearGradient-2%3E%3Cstop stop-color%23606060 offset0%25%3E%3C/stop%3E%3Cstop stop-color%23606060 stop-opacity0.3 offset100%25%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg strokenone stroke-width1 fillnone fill-ruleevenodd opacity0.9%3E%3Cg%3E%3Cpath dM40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z fillurl(%23linearGradient-1)%3E%3C/path%3E%3Cpath dM40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z fillurl(%23linearGradient-2)%3E%3C/path%3E%3Ccircle idOval fill%23606060 cx40.5 cy3.5 r3.5%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A) no-repeat;background-size: 100%;margin-left: 0;animation: loading linear infinite 1s;
}keyframes loading {from {transform: rotate(0);}to {transform: rotate(360deg);}
}3、JS
Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},/*** 组件的属性列表*/properties: {extClass: {type: String,value: },title: {type: String,value: },background: {type: String,value: },color: {type: String,value: },back: {type: Boolean,value: true},loading: {type: Boolean,value: false},homeButton: {type: Boolean,value: false,},animated: {// 显示隐藏的时候opacity动画效果type: Boolean,value: true},show: {// 显示隐藏导航隐藏的时候navigation-bar的高度占位还在type: Boolean,value: true,observer: _showChange},// back为true的时候返回的页面深度delta: {type: Number,value: 1},},/*** 组件的初始数据*/data: {displayStyle: },lifetimes: {attached() {const rect wx.getMenuButtonBoundingClientRect()wx.getSystemInfo({success: (res) {const isAndroid res.platform androidconst isDevtools res.platform devtoolsthis.setData({ios: !isAndroid,innerPaddingRight: padding-right: ${res.windowWidth - rect.left}px,leftWidth: width: ${res.windowWidth - rect.left }px,marginLeft:margin-left:${res.windowWidth - rect.right}px,Jheight:height:${(res.windowHeight-rect.top)-(res.windowHeight-rect.bottom)}px,safeAreaTop: isDevtools || isAndroid ? height: calc(var(--height) ${rect.top-10}px); padding-top: ${rect.top-1}px : ,})}})},},/*** 组件的方法列表*/methods: {_showChange(show) {const animated this.data.animatedlet displayStyle if (animated) {displayStyle opacity: ${show ? 1 : 0};transition:opacity 0.5s;} else {displayStyle display: ${show ? : none}}this.setData({displayStyle})},back() {const data this.dataif (data.delta) {wx.navigateBack({delta: data.delta})}this.triggerEvent(back, { delta: data.delta }, {})}},
})
