网站过期查询,旅游目的地网站建设,长沙企业网站建设品牌,电脑dw怎么制作网页一、实现效果#xff1a; 二、代码实现#xff1a;
1.在pages.json文件中#xff0c;单页面定义导航栏#xff0c;添加以下代码#xff1a;
navigationStyle: custom //自定义导航栏如图所示#xff1a;
2.在components文件夹下#xff0c;…一、实现效果 二、代码实现
1.在pages.json文件中单页面定义导航栏添加以下代码
navigationStyle: custom //自定义导航栏如图所示
2.在components文件夹下封装一个组件navBar.vue
templateview classprohibitionview classdemo :style[{background},{color},{height},{paddingTop}]!-- 左侧 --view classreturnback clickreturnBackimage src../static/images/more_user22x.png mode/image/view!-- 中间标题文字 --view classtitle{{title}}/view/view/view
/templatescriptexport default {name: navbarny,data() {return {height: 0,paddingTop: 0,index: ,}},// props: [title, back],props: {//接收的值// topArray: [],// index: ,title: { // 标题文字(默认为空)type: String,default: },color: { // 标题和返回按钮颜色(默认白色)type: String,default: #333333},//建议使用background 因为使用backgroundColor会导致不识别渐变颜色background: { // 背景颜色(不传值默认透明)type: String,default: transparent},back: { // 是否显示返回按钮(不传值默认不显示)type: Boolean,default: false},},mounted(){// this.cityname uni.getStorageSync(citynames)// console.log(shi,this.cityname)},created() {const demo uni.getMenuButtonBoundingClientRect()this.height demo.height pxthis.paddingTop demo.top px},methods: {bindPickerChange: function(e) {console.log(picker发送选择改变携带值为, e.detail.value)this.index e.detail.value},areaFun(){uni.navigateTo({url:/pages/SelectArea/area})},returnBack(){uni.navigateBack()}}}
/script
style langless.demo {position: relative; //注意建议使用相对定位因为固定定位会脱离文档流然后你还要去设置marginTop值// position: fixed;width: 100%;display: flex;align-items: center;justify-content: center;z-index: 100;padding-bottom: 10rpx;height: 70rpx !important;.returnback{position: absolute;bottom: 10rpx;left: 30rpx;height:60rpx; transform: rotate(-180deg);display: flex;align-items: center;image{width: 19rpx;height: 31rpx;}}.left {position: absolute;max-width: 280rpx;height: 60rpx;line-height: 44rpx;top: 0;bottom: 0;left: 70rpx;margin: auto;font-size: 24rpx;font-family: Microsoft YaHei UI;font-weight: 400;color: #fff;display: flex;align-items: center;image {width: 24rpx;height: 24rpx;margin-left: 7rpx;}.uni-input {max-width: 220rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}.title {font-size: 32rpx;font-weight: bold;font-stretch: normal;letter-spacing: r1px;color: #33333;}}
/style3.在页面中引用使用组件注写在页面的最上面
navbar classheader :titletitle/navbarscriptimport navbar from /components/navBar.vueexport default {components: {navbar},data() {return {title: 首页,}},}
/scriptstyle.header{width: 100%;height: auto;position: fixed;top: 0;left: 0;height: 150rpx;background-image: url(../../static/images/bg2x_01.png);background-size: 100% 100%;background-repeat: no-repeat;background-position: 0 0;z-index: 9999;}
/style完成~
