[商城整个模块,及个人中心相应的模块调整]

This commit is contained in:
2021-10-27 14:18:46 +08:00
parent e6181694d2
commit 2c1f11afd7
77 changed files with 14646 additions and 46 deletions

View File

@@ -0,0 +1,93 @@
## 1.2.82021-08-17
1、修复搜索导航栏按钮组位置问题
## 1.2.72021-08-13
1、h5端自动同步标签标题如微信标题<br>
2、组件内新增h5AutoTitle配置后可以h5端自动获取页面标题详情看描述文件
## 1.2.62021-08-13
更新说明文档
## 1.2.52021-08-13
修复按钮组位置偏差问题
## 1.2.42021-07-21
1、btn的icon添加text可以带文字<br>
2、修复样式btn右边间距、输入框字体大小改为inherit等
## 1.2.32021-07-20
1、开启了model滚动监听<br>
2、按钮组添加了badge设置角标
## 1.2.22021-05-25
1、新增设置样式事件setStyle()可通过ref来调用
2、修改config内style传参格式改为string类型兼容小程序
3、新增组件内注释
4、其它小优化
## 1.2.12021-03-16
处理了手机从竖屏变横屏后显示错乱问题
## 1.2.02021-03-05
处理了右按钮样式小程序兼容错误
## 1.1.92021-03-01
处理nvue兼容性引入scss失败、css错误
## 1.1.82021-02-25
1、兼容nvue
2、添加背景图
## 1.1.72021-02-24
1、兼容uni_modules官方新推出的插件管理兼容nv写法需要在pages.json添加代码"easycom": {"nv": "@/uni_modules/pyh-nv/components/pyh-nv/pyh-nv.vue"}
2、nvRoute函数更名为nv
## 1.1.62021-02-01
1、修复model定位问题
## 1.1.52021-02-01
1、全类型支持设置右方按钮组
2、添加h5 document.title等于config的标题
3、添加属性model可在页面内独立使用常用于不满足右方按钮小程序不显示的兼容方案使用2个nv
4、优化代码结构
## 1.1.42020-11-18
1、修复微信公众号中input的disabled点击跳转失效问题
2、修复右上角纯图片按钮变形问题
## 1.1.32020-09-27
修复config空值有时会报错的bug
## 1.1.22020-09-14
添加通用导航栏渐变色背景功能渐变色背景会导致transparent背景色渐变失效
## 1.1.12020-09-01
修复icon原生组件在小程序内高度铺满导致的错误问题
## 1.1.02020-08-27
1、使用icon代替图片图标,完全独立组件
2、添加回到顶部的功能
## 1.0.92020-08-18
''' 1、单logo模式支持全样式设置可实现全背景图等
2、优化了路由跳转判断及多端跳转
3、组件内利用了scss的特性优化了主色的修改
4、示例项目内添加了全局变量globalData以及全路由封装函数nvRoute组件也做了兼容处理可快速设置配置如需路由做特殊处理比如history模式等可使用封装的nvRoute统一处理 '''
## 1.0.82020-08-17
1、修改搜索框动态赋值方式更加方便直接修改search.value需要初始化value旧的赋值方式已废弃。重要 2、注释样式上版本组件内样式没有注释uni.scss的部分
## 1.0.72020-08-13
1、修改标题字体的size和weight,等同于uniapp的h5样式 2、补充组件主色覆盖样式的注释可去除注释快速修改也可使用uni.scss快速修改主色
## 1.0.62020-07-29
1、补充文档对于搜索框赋值的说明添加动态赋值功能
## 1.0.52020-07-20
补充单组件文件缺少的文件iconfont.wxss(后续版本已移除该文件)
## 1.0.42020-07-08
1、修复fixed定位辅助容器高度问题
2、补充示例项目属性项
## 1.0.32020-07-08
1、添加config.position属性并且默认为'fixed' 2、添加config.fixedAssist属性———固定定位辅助导航栏高度与导航栏一致可设置背景色 3、原home返回键背景取消如需要需使用componentBgColor 4、状态栏字体颜色与导航栏字体颜色一致状态栏字体只支持#000000或#ffffff 5、config.color 改为导航栏和状态栏字体色,也用于渐变完成时字体色(状态栏字体只支持#000000或#ffffff 6、transparent.initColor代替之前的状态栏字体颜色设置该值为导航栏与状态栏初始色状态栏字体只支持#000000或#ffffff 7、修改默认字体色为'#000000'
## 1.0.22020-07-07
修改示例配置,更友好上手
## 1.0.12020-07-07
上传初版,更新说明文档
## 1.0.02020-07-07
上传初版

Binary file not shown.

View File

@@ -0,0 +1,515 @@
<template name="nv">
<view class="pyh-nv-box" :style="style">
<view class='nvHeight' :style="[{'height':navigatorHeight+'px'},{'background':(config.fixedAssist&&config.fixedAssist.bgColor)||''}]" v-if="isFixed&&!(config.fixedAssist&&config.fixedAssist.hide)"></view>
<image :src="config.bgImage" :style="[{'position':config.model?'fixed':'absolute'},{'top':(config.model?(navigatorTop+'px'):0)},{'width':windowWidth+'px','height':navigatorHeight+'px'}]" v-if="config.bgImage" class="bgImage"></image>
<view :class="['nvBox',{'noModel':!config.model}]" :style="[{'width':windowWidth+'px'},{'color':getTxtColor},{'background':getBgColor},{'opacity':config.transparent&&config.transparent.type=='content'?transparent.opacity:1},{'position':isFixed?'fixed':'relative'},{'top':(isFixed&&config.model?(navigatorTop+'px'):0)}]">
<view class='nvHeight' :style="[{'height':navigatorHeight+'px'}]"></view>
<view class='nvFixed' :style="[{'width':windowWidth+'px'}]">
<!-- 单logo -->
<view :class="['nvContent','nvLogoBox',{'androidwx':androidwx}]" v-if="config.type=='logo'">
<image :src="config.logo.src?config.logo.src:'/static/logo.png'" class="nvLogo" :style="config.logo.style" :mode="config.logo.style|getImgMode" @tap.stop="nvLogoTap"></image>
<view v-if="config.btn&&config.btn.length>0" class="nvBtnGroup">
<block v-for="(b,n) in config.btn" :key="n">
<view class="nvBtn" v-if="b.icon" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||''">
<image :src="b.icon" mode="widthFix" class="nvBtnImg"></image>
<text class="nvBtnIconTxt" v-if="b.text">{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
<view class="nvBtn" v-else-if="b.text" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||{color:getTxtColor}">
<text>{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
</block>
</view>
</view>
<!-- 含搜索 -->
<view :class="['nvContent','nvSearchBox',{'nvHadBack':!config.hideback}]" v-else-if="config.type=='search'">
<image :src="config.logo.src?config.logo.src:'/static/logo.png'" class="nvLogo nvSearchLogo" :style="config.logo.style" :mode="config.logo.style|getImgMode" @tap.stop="nvLogoTap" v-if="config.logo&&!config.address"></image>
<view class="nvAddress" :style="[{'background':(config.address.bgColor||config.componentBgColor||'')},{'color':(config.address.color||'')}]" v-if="config.address" @tap.stop="nvAddressTap">
<text class="iconfont nvAddressIcon" :style="{'color':(config.address.color||'')}">&#xe613;</text>
<view class="nvAddressTextBox">
<text class="nvAddressText">{{config.address[config.address.fields||'province']||'广东省'}}</text>
</view>
</view>
<view class="nvSForm" >
<view class="nvSBox" :style="[{'background':(config.search.bgColor||config.componentBgColor||'')},{'border':config.search.border||''}]" @tap.stop="searchTap" data-isInput="true">
<icon type="search" size="18" class="searchIcon"></icon>
<input class="nvInput" type="text" :value="inputValue" :focus="config.search.focus" :placeholder="config.search.placeholder" :disabled="!config.search.input" @input="inputChange" @confirm="formSubmit" :confirm-type="config.search.confirmType||'search'" placeholder-class="searchPlac" :placeholder-style="config.search.placeholderStyle||''"/>
<icon type="clear" size="15" class="nvSClose" @tap.stop="inputClear" v-if="inputValue"></icon>
</view>
<text class='nvSBtn' @tap.stop="formSubmit" v-if="config.search.btn&&config.search.input" :style="config.search.btn.style||''">{{config.search.btn.text||'搜索'}}</text>
</view>
<view v-if="config.btn&&config.btn.length>0" class="nvBtnGroup nvBtnGroup-static">
<block v-for="(b,n) in config.btn" :key="n">
<view class="nvBtn" v-if="b.icon" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||''">
<image :src="b.icon" mode="widthFix" class="nvBtnImg"></image>
<text class="nvBtnIconTxt" v-if="b.text">{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
<view class="nvBtn" v-else-if="b.text" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||{color:getTxtColor}">
<text>{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
</block>
</view>
</view>
<!-- 默认导航栏 -->
<view class="nvContent nvDefault" v-else>
<view v-if="config.tabArr&&config.tabArr.length>0" :class="['nvTitle','nvTabBox',{'androidwx':androidwx}]">
<view :class="['nvTab',{'nvTabHide':t.hide}]" @tap.stop="nvTabTap" :data-index="i" v-for="(t,i) in config.tabArr" :key="i">
<text :class="[t.active?'nTTxt-ac':'nTTxt']" :style="{'color':(t.active?mainColor:getTxtColor)}">{{t.title}}</text>
<view :class="[t.active?'nTLine-ac':'nTLine']"></view>
</view>
</view>
<view v-else :class="['nvTitle',{'androidwx':androidwx},{'hideback':config.hideback}]">
<text :style="{'color': getTxtColor}">{{config.title||title}}</text>
</view>
<view v-if="config.btn&&config.btn.length>0" class="nvBtnGroup">
<block v-for="(b,n) in config.btn" :key="n">
<view class="nvBtn" v-if="b.icon" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||''">
<image :src="b.icon" mode="widthFix" class="nvBtnImg"></image>
<text class="nvBtnIconTxt" v-if="b.text">{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
<view class="nvBtn" v-else-if="b.text" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||{color:getTxtColor}">
<text>{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
</block>
</view>
</view>
<!-- 返回键 -->
<text :class="['iconfont','nvback',{'nvhome':isSharePage&&!config.closeCheckback}]" @tap.stop="backTap" :style="{'background':(isSharePage&&!config.closeCheckback?(config.componentBgColor||''):''),'color':getTxtColor,'border-radius':'26rpx','font-size': isSharePage&&!config.closeCheckback?'36rpx':'54rpx'}" v-if="!config.hideback">{{isSharePage&&!config.closeCheckback?'&#xe605;':'&#xe743;'}}</text>
</view>
</view>
<text class="iconfont nvToTop" :style="(config.toTop&&config.toTop.style)||''" v-if="config.toTop&&showToTop" @tap.stop="toTopTap">&#xe64d;</text>
</view>
</template>
<script>
var platform;
//#ifdef H5
platform="h5"
//#endif
//#ifdef APP-PLUS
platform="app"
//#endif
//#ifdef MP
platform="mp"
//#endif
export default {
name:"nv",
props:{
config:{
type:Object,
default(){
return {}
}
},
},
data() {
return {
title:getApp().globalData.NAME||"pyh-nv",
h5AutoTitle:true,
platform:platform||'h5',
mainColor:getApp().globalData.mainColor||"#fff",
currentPages:getCurrentPages().length||1,
home:getApp().globalData.HOME||"/pages/index/index",
inputValue:'',
showToTop:false,
transparent:{
initColor:"#ffffff",
finishColor:"#000000",
color:"#ffffff",
opacity:0
},
windowWidth:uni.getSystemInfoSync().windowWidth,
style:""
};
},
watch:{
"config.search.value":function(value){
//监听输入框值得改变
var e = {detail:{value:value}};
this.inputValue = e.detail.value;
if(this.config.type=="search"&&this.config.search.input)this.$emit("nvInput",e);
}
},
filters:{
getImgMode(style){
//获取图片mode类型
if(style&&style.indexOf("height")>-1){
return 'aspectFill';
}else{
return 'widthFix';
}
}
},
computed:{
statusHeight(){
//状态栏高度
var statusBarHeight = this.config.model?0:uni.getSystemInfoSync().statusBarHeight;
return statusBarHeight+'px';
},
navigatorHeight(){
//导航栏高度
var statusBarHeight = this.config.model?0:uni.getSystemInfoSync().statusBarHeight;
var windowWidth = this.lockWindowWidth&&this.windowWidth>750?375:this.windowWidth;
return parseInt(88*windowWidth/750)+statusBarHeight;
},
navigatorTop(){
//model类型下的顶部高度
var windowWidth = this.lockWindowWidth&&this.windowWidth>750?375:this.windowWidth;
if(this.config.model){
return parseInt(88*windowWidth/750)+uni.getSystemInfoSync().statusBarHeight;
}else{
return 0;
}
},
//安全区域高度
safeArea(){return this.config.safeArea||uni.getSystemInfoSync().safeArea.height;},
//固定定位判断
isFixed(){return this.config.transparent||this.config.position=='fixed'||this.config.position=='absolute'||!this.config.position;},
//判断分享页
isSharePage(){return this.currentPages==1;},
//安卓微信
androidwx(){
if(this.config.checkAndroidwx&&this.platform=="mp"&&uni.getSystemInfoSync().platform.indexOf("ios")==-1){
return true;
}else{
return false;
}
},
//获取字体色
getTxtColor(){
return ((this.config.transparent&&this.config.transparent.initColor)?this.transparent.color:'')||this.config.color||'';
},
//获取/转换背景色
getBgColor(){
var that = this;
if(this.config.bgImage){
return "transparent";
}else if(this.config.bgColor&&this.config.bgColor.indexOf("gradient")>-1){
return this.config.bgColor;
}else{
return (this.config.bgColor||this.config.transparent)?'rgba('+getRgbString()+','+(this.config.transparent&&this.config.transparent.type!='content'?this.transparent.opacity:1)+')':'#fff';
}
function getRgbString(){
var bgColor = that.config.bgColor||"#ffffff",returnString=""
if(bgColor.indexOf(",")>-1){
returnString = bgColor.split('(')[1].replace(')','').split(',').slice(0,3).join(",")
}else{
if(bgColor.length==4)bgColor = bgColor+bgColor.charAt(bgColor.length-1)+bgColor.charAt(bgColor.length-1)+bgColor.charAt(bgColor.length-1)
var string = bgColor.replace("#",'');
returnString = parseInt(string.substring(0,2), 16)+','+parseInt(string.substring(2,4), 16)+','+parseInt(string.substring(4,6), 16)
}
return returnString
}
}
},
created() {
// #ifdef APP-NVUE
var domModule = weex.requireModule("dom");
domModule.addRule('fontFace', {
'fontFamily': 'iconfont',
'src': "url('http://at.alicdn.com/t/font_1687851_vdpjdiddv6.ttf')"
})
// #endif
if(this.config.search&&this.config.search.value)this.inputValue=this.config.search.value;
if(this.config.transparent&&this.config.transparent.initColor){
var initColor = this.config.transparent.initColor,finishColor = this.config.color||"#000000";
if(initColor.indexOf("#")>-1&&initColor.length==4){
initColor = initColor+initColor.charAt(initColor.length-1)+initColor.charAt(initColor.length-1)+initColor.charAt(initColor.length-1);
}
if(finishColor.indexOf("#")>-1&&finishColor.length==4){
finishColor = finishColor+finishColor.charAt(finishColor.length-1)+finishColor.charAt(finishColor.length-1)+finishColor.charAt(finishColor.length-1);
}
if(!((initColor=="#000000"||initColor=="#ffffff")&&(finishColor=="#000000"||finishColor=="#ffffff"))){
console.log("状态栏颜色只支持,#000000或#ffffff");
}
this.transparent.initColor = initColor;
this.transparent.color = initColor;
this.transparent.finishColor = finishColor;
}
this.deviceOrientation=uni.getSystemInfoSync().windowWidth>750?"landscape":"portrait";
if(this.deviceOrientation=="portrait")this.lockWindowWidth=true;
uni.onWindowResize((res)=>{
if(this.deviceOrientation!=res.deviceOrientation){
this.deviceOrientation = res.deviceOrientation;
this.windowWidth = res.size.windowWidth;
}
})
},
mounted() {
if(this.config.color){
var obj = {frontColor:this.config.color,backgroundColor:this.config.bgColor||"#ffffff"};
uni.setNavigationBarColor(obj);
}
if(this.config.transparent&&this.config.transparent.initColor){
var obj = {frontColor:this.transparent.initColor,backgroundColor:this.config.bgColor||"#ffffff"};
uni.setNavigationBarColor(obj);
}
if(platform=="h5"&&!this.config.model){
this.config.title&&uni.setNavigationBarTitle({title:this.config.title})
if(document.title&&this.h5AutoTitle)this.title=document.title
document.setTitle = function(t) {document.title = t;var i = document.createElement('iframe');/*i.src = '//m.baidu.com/favicon.ico';*/i.style.display = 'none';i.onload = function() {setTimeout(function(){i.remove();}, 9)};document.body.appendChild(i);}
setTimeout(()=>{document.setTitle(this.config.title||this.title);}, 1);
}
},
onUnload() {uni.offWindowResize();},
methods:{
setStyle(object){
//设置导航栏样式
var style = "";
for(var i in object){style += (i+":"+object[i]+";")}
this.style=style;
},
nvLogoTap(e){
//logo点击
var url = this.config.logo.url;
this.$emit("nvLogoTap");
url&&uni.reLaunch({url:url});
},
nvAddressTap(e){
//地址图标点击
this.$emit("nvAddressTap");
},
searchTap(e){
//搜索按钮点击
if(this.config.search.url||this.config.search.linkType){
this.linkTo({currentTarget:{dataset:{url:this.config.search.url,type:this.config.search.linkType||''}}});
}else{
this.$emit("searchTap");
}
},
inputChange(e){
//输入框输入
this.inputValue = e.detail.value;
if(this.config.type=="search"&&this.config.search.input)this.$emit("nvInput",e)
},
inputClear(e){
//输入框清除
this.inputValue="";
if(this.config.type=="search"&&this.config.search.input)this.$emit("nvInput",e);
},
formSubmit(e){
//输入框提交
var e = {detail:{value:this.inputValue}};
this.$emit("nvFormSubmit",e)
},
nvBtnTap(e){
//右按键点击
var e = {type:e.currentTarget.dataset.type,index:parseInt(e.currentTarget.dataset.index)};
this.$emit("nvBtnTap",e);
},
nvTabTap(e){
//中间tab按键点击
var e = {index:parseInt(e.currentTarget.dataset.index)};
this.$emit("nvTabTap",e);
},
toTopTap(e){
//回到顶部
this.showToTop=false
uni.pageScrollTo({scrollTop:0,duration:this.config.toTop.duration||(this.config.toTop.duration===0?0:300)});
this.$emit("nvToTop");
},
pageScroll(e={scrollTop:0}){
//页面滚动
if(!this.config.transparent)return;
var anchor = this.navigatorHeight;
if(this.config.transparent.anchor)anchor=this.config.transparent.anchor;
var op = parseFloat(parseFloat(e.scrollTop/anchor).toFixed(1));
if(e.scrollTop<=anchor){
this.transparent.opacity = op;
if(this.config.transparent.initColor){
if(op>=.5){
this.transparent.color=this.transparent.finishColor;
uni.setNavigationBarColor({frontColor:this.transparent.finishColor,backgroundColor:this.config.bgColor||"#ffffff"});
}else{
this.transparent.color=this.transparent.initColor;
uni.setNavigationBarColor({frontColor:this.transparent.initColor,backgroundColor:this.config.bgColor||"#ffffff"});
}
}
}else{
this.transparent.opacity = 1;
}
if(this.config.toTop){
if(this.showToTop&&e.scrollTop<this.safeArea){
this.showToTop=false;
}
if(!this.showToTop&&e.scrollTop>=this.safeArea){
this.showToTop=true;
}
}
},
backTap(){
//返回键点击
if(this.config.backpress){
this.$emit("backTap");
}else{
this.linkTo({currentTarget:{dataset:{type:'navigateBack'}}});
}
},
linkTo(e) {
//跳转
var url=e.currentTarget.dataset.url,
type=e.currentTarget.dataset.type,
isInput=e.currentTarget.dataset.isInput;
if(isInput&&this.config.type=="search"&&this.config.search&&this.config.search.input){
return;
}
if(this.$nv){
this.$nv(url,type);
}else{
if(!url&&!type)return;
if(url=="/"||url==".")return;
if(typeof(url)=="object"){
uni.navigateTo(url);
return
}
if(typeof(url)=="number"){
if(this.currentPages==1){
uni.reLaunch({url:this.home})
}else{
uni.navigateBack({delta:Math.abs(url||1)})
}
return;
}
if(type){
if (type.indexOf("ab")>-1) {
uni.switchTab({ url: url });
} else if (type=='-1'||type.indexOf("redirect")>-1||type.indexOf("rep")>-1) {
uni.redirectTo({ url: url });
} else if (type.indexOf("aunch")>-1) {
uni.reLaunch({ url: url });
} else if (type.indexOf("ack")>-1) {
if(this.currentPages==1){
uni.reLaunch({url:this.home});
}else{
uni.navigateBack();
}
}else{
uni.navigateTo({url:url});
}
}else{
if(url.indexOf("/")==0||url.indexOf(".")==0){
uni.navigateTo({url:url});
}else{
if(url.indexOf("?")>0){url+="&platform="+platform;}else{url+="?platform="+platform;};
if(platform=="h5"){
top.location.href=url;
}else if(platform=="app"){
plus.runtime.openUrl(url);
}else{
uni.navigateTo({url:"/pages/other/webview/webview?src="+url.replace("?","&")});
}
}
}
}
}
}
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: iconfont;
src: url('./iconfont.ttf')
}
.iconfont {
font-family: iconfont;
font-size: 30rpx;
font-style: normal;
}
//主色可以设置uni.scss的$mainColor
//或
//uni.scss未定义或定义为null,修改下方$mainColor的默认值
$mainColor: #aa55ff !default;
.pyh-nv-box{position: relative;}
.bgImage{position: absolute;left: 0;top: 0;}
.nvBox{background-color: #fff;z-index: 991;color: #000000;}
.noModel{z-index: 992;}
.nvHeight{height: 88rpx;}
.nvFixed{position: absolute;bottom: 0;height: 88rpx;left: 0;z-index: 992;padding: 0 20rpx;}
.nvContent{flex: 1;height: 88rpx;align-items: center;}
.nvInput{font-size: inherit;flex: 1;}
.searchIcon{
width: 18px;
margin-right: 20rpx;
/* #ifdef MP */
height: 18px;
/* #endif */
}
.nvTitle{position: absolute;top: 0;left: 0;right: 0;text-align: center;height: 88rpx;line-height: 88rpx;align-items: center;justify-content: center;padding: 0 80rpx;font-size: 32rpx;font-weight: bold;overflow: hidden;text-overflow: ellipsis;}
.androidwx{text-align: left;padding-left: 80rpx;justify-content: flex-start!important;}
.nvback{font-size: 54rpx;position: absolute;left: 6rpx;padding-left: 8rpx;bottom: 18rpx;flex-direction: row;align-items: center;z-index: 992;width: 52rpx;height: 52rpx;}
.nvhome{border-radius: 26rpx;font-size: 36rpx;padding: 0;left: 20rpx;text-align: center;justify-content: center;}
.nvHadBack{padding-left: 60rpx;}
//logo
.nvLogoBox{align-items: center;justify-content: center;position: absolute;left: 0;padding-right: 0rpx!important;left: 0;right: 0;}
.nvLogo{width: 60rpx;}
//含搜索框
.nvSearchLogo{margin-right: 20rpx;}
.nvAddress{background-color: #f8f8f8;border-radius: 44rpx;justify-content: center;align-items: center;padding: 0 16rpx 0 10rpx;font-size: 28rpx;line-height: 30rpx;margin-right: 20rpx;color: #000000;height: 60rpx;width: 144rpx;}
.nvAddressIcon{width: 30rpx;margin-right: 4rpx;font-size: 34rpx;}
.nvAddressTextBox{width: 84rpx;overflow: hidden;}
.nvAddressText{flex: 1;font-size: 28rpx;line-height: 30rpx;overflow: hidden;text-overflow: ellipsis;}
.searchPlac{color: #bbb;}
.nvSForm{flex: 1;justify-content: space-between;align-items: center;}
.nvSBox{flex: 1;border-radius: 44rpx;background-color: #f8f8f8;height: 60rpx;line-height: 60rpx;padding: 0 20rpx;align-items: center;}
.nvSBtn{color: #fff;border-radius: 44rpx;height: 60rpx;line-height: 60rpx;width: 120rpx;padding: 0;text-align: center;font-size: 28rpx;margin-left: 20rpx;background-color: $mainColor;}
.nvSClose{
/* #ifdef MP */
height: 15px;
/* #endif */
}
//右边按钮组
.nvBtnGroup{position: absolute;right: 20rpx;top: 0;height: 88rpx;align-items: center;justify-content: center;z-index: 993;font-size: 28rpx;color: #000000;}
.nvBtn{display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;}
.nvBtn:first-child{margin-left: 0;}
.nvBtn,.nvBtnImg{padding: 0;margin-left: 20rpx;background: transparent;border: 0;color: #000000;z-index: 3;font-size: 28rpx;position: relative;}
.nvBtnImg{width: 48rpx;margin-left: 0;}
.nvBtnGroup-static{position: relative;padding-left: 20rpx;right: 0;}
.nvBtn .nvBadge{width: 26rpx;height: 26rpx;position: absolute;top: -8rpx;right: -8rpx;display: flex;align-items: center;justify-content: center;border-radius: 50%;overflow: hidden;background-color: red;color: #fff;font-size: 16rpx;z-index: 4;}
//tab栏
.nvTabBox{position: absolute!important;}
.nvTab{flex-direction: column!important;align-items: center;justify-content: flex-end;margin: 0 10rpx;position: relative;}
.nTTxt,.nTTxt-ac{padding: 0 10rpx;line-height: 88rpx;}
.nTLine,.nTLine-ac{height: 4rpx;border-radius: 2rpx;background: transparent;position: absolute;bottom: 0;left: 0;right: 0;}
.nTTxt-ac{color: $mainColor;}
.nTLine-ac{background: $mainColor;}
.nvTabHide{width:0;height:0;margin:0;overflow:hidden;}
//回到顶部
.nvToTop{position: fixed;bottom: 200rpx;right: 40rpx;z-index: 992;background: #fff;border-radius: 50%;width: 80rpx;height: 80rpx;text-align: center;line-height: 80rpx;font-size: 46rpx;box-shadow: 2rpx 2rpx 2rpx 2rpx #ddd;}
//小程序胶囊留位
/* #ifdef MP-WEIXIN */
.noModel .nvContent{padding-right: 200rpx;}
.noModel .nvSBtn,.noModel .nvBtnGroup{display: none;}
/* #endif */
/* #ifdef APP-NVUE */
.nvContent,.nvback,.nvLogoBox,.nvSearchBox,.nvAddress,.nvSForm,.nvSBox,.nvBtnGroup,.nvTabBox,.nvTab{flex-direction: row;}
.nvTitle,.nvAddress,.nvAddressText{lines: 1;}
.pyh-nv-box,.nvBox,.nvHeight,.nvFixed,.nvTitle,.nvLogoBox,.nvSearchBox,.nTLine,.nTLine-ac{flex: 1;}
.nvTab{flex-direction: column!important;align-items: center;justify-content: flex-end;line-height: 80rpx;margin: 0 10rpx;}
/* #endif */
/* #ifndef APP-NVUE */
.nvContent,.nvback,.nvLogoBox,.nvSearchBox,.nvAddress,.nvSForm,.nvSBox,.nvBtnGroup,.nvTabBox,.nvTab{display: flex;flex-direction: row;}
.nvTitle,.nvAddressText{white-space: nowrap;}
.nvBox,.nvBox *,.nvContent,.nvTitle,.nvFixed{box-sizing: border-box;}
.nvLogo,.nvAddressIcon,.nvBtnImg{height: auto;}
.pyh-nv-box,.nvBox,.nvHeight,.nvFixed,.nvTitle,.nvLogoBox,.nvSearchBox,.nTLine,.nTLine-ac{width: 100%;}
/* #endif */
</style>

View File

@@ -0,0 +1,79 @@
{
"id": "pyh-nv",
"name": "pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏",
"version": "1.2.8",
"description": "所有属性都可自定义兼容各端包括nvue所有类型导航栏都可渐变还可设置状态栏字体色1.1.6版本后续非uni_modules版本不再更新",
"keywords": [
"导航栏",
"自定义",
"渐变",
"状态栏",
"多端兼容"
],
"displayName": "pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏",
"repository": "https://github.com/Ulovely/pyh-nv",
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
},
"engines": {
"HBuilderX": "^3.1.0"
}
}

View File

@@ -0,0 +1,131 @@
### pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏
pyh-nv 导航栏组件,组件名:``nv``,代码块: nv。
**使用方式:**
uni_modules:
[uni_modules使用方法](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6)
uni_modules在template内的名称为pyh-nv,兼容nv写法需要在pages.json添加代码
"easycom": {"nv": "@/uni_modules/pyh-nv/components/pyh-nv/pyh-nv.vue"}
非uni_modules:
复制uni_modules->pyh-nv->components->pyh-nv文件到根目录的components下
在 ``main.js`` 中引用组件
```javascript
import nv from "@/components/pyh-nv/pyh-nv.vue";
Vue.component("nv",nv)
```
在 ``template`` 中使用组件
```html
<nv></nv>
<nv :config="{'hideback':true}"></nv>
<nv :config="config"></nv>
```
在 ``script`` 中 config 说明
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
**config 属性说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|title |String |'pyh-nv' |标题,默认值为getApp().globalData.NAME或组件内title写死的字符串h5端能自动同步标签标题比如微信标题标题可以使用config配置修改|
|position |String |'fixed' |定位方式,fixed和absoult都是固定定位其它值为静态导航栏随页面滚动 |
|hideback |Boolean|false |是否隐藏导航栏返回功能 |
|model |Boolean|false |是否页面内独立使用模型如果是固定定位top为导航栏高度 |
|bgImage |String |'' |导航栏背景图,如果使用则bgColor无效|
|bgColor |String |'#ffffff' |导航栏背景色,如果使用渐变色transparent渐变属性失效|
|color |String |'#000000' |导航栏和状态栏字体色,也用于渐变完成时字体色(状态栏字体只支持#000000或#ffffff|
|componentBgColor |String |'#f8f8f8' |导航栏组件背景色(可被覆盖),如果有设置,回到首页的返回键有背景色|
|type |String |'default' |导航栏类型(默认为通用),还有logo和search |
|safeArea |Number |安全高度 |暂时只用于控制滚动显示,比如回到顶部 |
|toTop |Object | |是否使用回到顶部,有该属性就是使用,详细见下方toTop说明} |
|logo |Object | |导航栏logo的配置,仅type为logo或search时有效,详细见下方logo说明 |
|search |Object | |导航栏含搜索框的配置,仅type为search时有效,详细见下方search说明 |
|transparent |Object | |导航栏渐变配置,详细见下方transparent说明 |
|fixedAssist |Object | |固定/绝对定位时辅助容器,{hide:false,bgColor:''} |
|address |Object | |搜索导航栏左地址配置,{province:'广东省'} |
|btn |Array |[] |导航栏右方按钮组,{text:'点击1',style:''},{icon:'',text:'',badge:{text:'1',style:''}}|
|tabArr |Array |[] |导航栏中间tab切换,{title:'',active:true,hide:false} |
**pyh-nv.vue 内配置说明:**
|title |String |'pyh-nv' |标题默认值,getApp().globalData.NAME或自定义字符串 |
|h5AutoTitle |Boolean|false |为true时而且config没传入title,h5端自动获取pages.json的navigationBarTitleText|
**config 内 toTop 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|duration |Number |300 |回到顶部的滚动动画时间ms |
|style |String |'' |样式配置 |
**config 内 logo 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|src |String |'/static/logo.png' |logo路径 |
|url |String |'' |如果传值,点击logo会reLaunch到该url |
|style |String |'' |样式配置 |
**config 内 search 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|value |String |'' |input的初始值如需动态赋值必须初始化 |
|bgColor |String |'#f8f8f8' |组件背景色,覆盖 componentBgColor |
|input |Boolean|false |输入框提示语样式 |
|url |String |'' |input为false时生效,点击navigateTo到url |
|focus |Boolean|false |是否自动聚焦 |
|border |String |'' |输入框边框样式 |
|placeholder |String |'搜索' |输入框提示语 |
|placeholderStyle |String |'' |输入框提示语样式 |
|btn |Object | |input为true时生效,搜索框提交按钮,{text:'搜索',style:''} |
|confirmType |String |'search' |同官方input的confirm-type,设置回车键文字 |
**config 内 transparent 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|type |String |'background' |渐变类型,content为全透明渐变 |
|anchor |Number |当前导航栏高度 |最终渐变位置 |
|initColor |String |'#ffffff' |导航栏与状态栏初始色,(状态栏字体只支持#000000或#ffffff |
**组件pyh-nv 事件说明(详情请参考示例项目)**
|属名 |说明 |
|--- |---- |
|nvLogoTap |点击logo,仅logo存在时生效 |
|nvAddressTap |点击地址,仅地址存在时生效 |
|nvInput |输入框input事件,仅search.input为true时生效 |
|nvFormSubmit |输入框确认事件,仅search.input为true时生效 |
|nvBtnTap |右方按钮组点击事件,仅右方按钮存在时生效 |
|nvTabTap |中间tab组点击事件,仅中间tab按钮存在时生效 |
**ref 事件说明(详情请参考示例项目)**
|事件名 |参数类型 |参数默认值 |说明 |
|--- |---- |---- |---
|setStyle |Object |{} |直接设置导航栏样式 |
|pageScroll |Object |{scrollTop:0} |传递页面滚动信息 |
**感谢:**
> 有更多优化建议和需求,请联系作者 panyh 。谢谢!