前言
微信小程序中导航栏一般来说是默认的展示标题等等，可以做的样式改变仅仅能通过配置一些官方提供的属性来实现。除此之外小程序还提供了navigationStyle这个属性可以让用户去自定义的实现导航栏。下面直接奉上代码来说明实现沉浸式导航栏。
展示效果
文件说明
涉及到的文件有app.json
license-plate.js license-plate.wxml license-plate.wxss (这三个是封装的组件)
input-license.js input-license.wxml input-license.wxss (这三个是调用组件的页面，同时也涉及组件中的数据传输，方便调用的页面拿到输入的数据)
此外有input-license.wxss中引入的app.wxss这个是我根据自己习惯写的一些布局命名方式就不贴在文章里了
文件代码
JSON文件
app.json
可以在全局的json里引入组件也可以在某个页面去单独引入，我这里是把组件引在了全局里app.json
"usingComponents": {
"license-plate":"/component/license-plate/license-plate"
},组件代码
license-plate.js
// component/license-plate/license-plate.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
firstRow:[],
secondRow:[],
thirdRow:[],
fourthRow:[],
currentFocus:0,
tabIndex:'0' //0-蓝牌，1-新能源
},
/**
* 组件的方法列表
*/
methods: {
// 输入省份
inpuProvince:function(e){
var first=['1','2','3','4','5','6','7','8','9','0'];
var second=['Q','W','E','R','T','Y','U','O','P'];
var third=['A','S','D','F','G','H','J','K','L'];
var fourth=['Z','X','C','V','B','N','M']
console.log(e)
this.triggerEvent('inputProvince',e.currentTarget.dataset.name)
this.setData({
currentFocus:1,
firstRow:first,
secondRow:second,
thirdRow:third,
fourthRow:fourth
})
},
loadkeyboard:function(e,tab){
console.log(e)
if(e==0){
console.log('aaa')
this.setData({
currentFocus:0,
firstRow:['苏','京','津','沪','翼','渝','黑','吉','辽'],
secondRow:['晋','青','豫','皖','浙','闽','赣','湘','鄂'],
thirdRow:['粤','琼','甘','陕','贵','云','川','蒙'],
fourthRow:['新','藏','宁','桂','港','澳']
})
}
else{
console.log('bbb')
this.setData({
currentFocus:e,
firstRow:['1','2','3','4','5','6','7','8','9','0'],
secondRow:['Q','W','E','R','T','Y','U','O','P'],
thirdRow:['A','S','D','F','G','H','J','K','L'],
fourthRow:['Z','X','C','V','B','N','M']
})
}
this.data.tabIndex=tab
},
// 输入市
inputCity:function(e){
var first=['1','2','3','4','5','6','7','8','9','0'];
var second=['Q','W','E','R','T','Y','U','O','P'];
var third=['A','S','D','F','G','H','J','K','L'];
var fourth=['Z','X','C','V','B','N','M']
console.log(e)
this.triggerEvent('inputCity',e.currentTarget.dataset.name)
this.setData({
currentFocus:2,
firstRow:first,
secondRow:second,
thirdRow:third,
fourthRow:fourth
})
},
// 输入车牌
inputLicense:function(e){
if(e.currentTarget.dataset.name!='O'){
//蓝牌
if(this.data.tabIndex=='0'&&this.data.currentFocus!=7){
this.triggerEvent('inputLicense',e.currentTarget.dataset.name)
this.setData({
currentFocus:this.data.currentFocus+1
})
}
else if(this.data.tabIndex=='1'&&this.data.currentFocus!=8){ //新能源
this.triggerEvent('inputLicense',e.currentTarget.dataset.name)
this.setData({
currentFocus:this.data.currentFocus+1
})
}
else{
return;
}
}
},
backSpace:function(){
if(this.data.currentFocus>2){
this.setData({
currentFocus:this.data.currentFocus-1
})
this.triggerEvent('backspace',this.data.currentFocus)
}
else if(this.data.currentFocus==2){
this.setData({
currentFocus:this.data.currentFocus-1
})
this.triggerEvent('backspace',this.data.currentFocus)
}
else if(this.data.currentFocus==1){
this.setData({
currentFocus:this.data.currentFocus-1,
firstRow:['苏','京','津','沪','翼','渝','黑','吉','辽'],
secondRow:['晋','青','豫','皖','浙','闽','赣','湘','鄂'],
thirdRow:['粤','琼','甘','陕','贵','云','川','蒙'],
fourthRow:['新','藏','宁','桂','港','澳']
})
this.triggerEvent('backspace',this.data.currentFocus)
}
else{
return;
}
},
closeKeyBoard:function(){
this.triggerEvent('closeKeyBoard')
}
}
})license-plate.wxml
<!--component/license-plate/license-plate.wxml--> <view class="keyBoard flxc"> <view class="top-part flxr aic jcb"> <view class="font30 fontgrey" bindtap="closeKeyBoard">取消</view> <view class="font30 fontblue" bindtap="closeKeyBoard">确定</view> </view> <!-- 省份键盘 --> <view class="middle-part flxc aic" wx:if="{{currentFocus==0}}"> <view class="flxr"> <view wx:for="{{firstRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{secondRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{thirdRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{fourthRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view> <view class="key-class flxc aic jcc" catchtap="backSpace"> <image src="/image/delete.png" class="backspace"></image> </view> </view> </view> <!-- 市区键盘 --> <view class="middle-part flxc aic" wx:if="{{currentFocus==1}}"> <view class="flxr"> <view wx:for="{{firstRow}}" class="key-class2" data-name="{{item}}">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{secondRow}}" class="key-class" data-name="{{item}}" catchtap="inputCity">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{thirdRow}}" class="key-class" data-name="{{item}}" catchtap="inputCity">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{fourthRow}}" class="key-class" data-name="{{item}}" catchtap="inputCity">{{item}}</view> <view class="key-class flxc aic jcc" catchtap="backSpace"> <image src="/image/delete.png" class="backspace"></image> </view> </view> </view> <!-- 车牌键盘 --> <view class="middle-part flxc aic" wx:if="{{currentFocus!=1&¤tFocus!=0}}"> <view class="flxr"> <view wx:for="{{firstRow}}" catchtap="inputLicense" class="key-class" data-name="{{item}}">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{secondRow}}" class="{{item=='O'?'key-class2':'key-class'}}" data-name="{{item}}" catchtap="inputLicense">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{thirdRow}}" class="key-class" data-name="{{item}}" catchtap="inputLicense">{{item}}</view> </view> <view class="flxr mt10"> <view wx:for="{{fourthRow}}" class="key-class" data-name="{{item}}" catchtap="inputLicense">{{item}}</view> <view class="key-class flxc aic jcc" catchtap="backSpace"> <image src="/image/delete.png" class="backspace"></image> </view> </view> </view> </view>
license-plate.wxss
/* component/license-plate/license-plate.wxss */
@import '/app.wxss';
.friendlyAlert{
height: 100%;
width: 100%;
position: absolute;
}
.keyBoard{
height: 616rpx;
width: 100%;
background: #E1E3E7;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
position: fixed;
bottom: 0;
z-index: 100
}
.top-part{
height: 82rpx;
width: 100%;
padding: 0 24rpx;
}
.font30{
font-size: 30rpx;
}
.font36{
font-size: 36rpx;
}
.fontblue{
color: #3485F4;
}
.fontgrey{
color: #91959C;
}
.middle-part{
height: 454rpx;
width: 100%;
padding: 26rpx 10rpx;
}
.key-class{
height: 90rpx;
width: 66rpx;
border-radius: 8rpx;
font-size: 36rpx;
color: #333;
line-height: 90rpx;
text-align: center;
box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.16);
background: #fff;
margin-right: 8rpx;
}
.key-class2{
height: 90rpx;
width: 66rpx;
border-radius: 8rpx;
font-size: 36rpx;
color: #CACACA;
line-height: 90rpx;
text-align: center;
box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.16);
background: #fff;
margin-right: 8rpx;
}
.backspace{
height: 32rpx;
width: 44rpx;
}页面代码
input-license.js
// pages/component/input-license/input-license.js
Page({
/**
* 页面的初始数据
*/
data: {
tabIndex: '0',
code: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }],
currentFocus: 0,
isFocus: false,
showKeyBoard: false,
license_color: '0',
license_plate: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 输入省份
inputProvince: function (e) {
var temp = this.data.code;
temp[0].value = e.detail;
this.setData({
code: temp,
currentFocus: 1
})
},
// 输入城市
inputCity: function (e) {
var temp = this.data.code;
temp[1].value = e.detail;
this.setData({
code: temp,
currentFocus: 2
})
},
//输入车牌
inputLicense: function (e) {
var temp = this.data.code;
var i = this.data.currentFocus
temp[i].value = e.detail;
this.setData({
code: temp,
currentFocus: i + 1
})
},
// 退格
backspace: function (e) {
var i = e.detail
console.log(i)
var temp = this.data.code;
temp[i].value = '';
this.setData({
code: temp,
currentFocus: i
})
},
closeKeyBoard: function () {
this.setData({
showKeyBoard: false,
isFocus: false
})
},
openKeyBoard: function () {
this.setData({
showKeyBoard: true,
isFocus: true
})
this.keyboard = this.selectComponent("#keyboard");
this.keyboard.loadkeyboard(this.data.currentFocus, this.data.tabIndex)
},
// 切换车牌
changeTab: function (e) {
console.log(e)
this.setData({
tabIndex: e.currentTarget.dataset.index,
currentFocus: 0
})
if (e.currentTarget.dataset.index == '1') {
this.setData({
code: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }]
})
this.data.license_color = '4'
}
else {
this.setData({
code: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }]
})
this.data.license_color = '0'
}
},
})input-license.wxml
<!--pages/component/input-license/input-license.wxml-->
<nav-bar title="车牌键盘" whetherShow="1"></nav-bar>
<view class="top-part" style="margin-top:235rpx">
<view class="title">选择车牌类型</view>
<view class="chooseType flxr aic mt20">
<image wx:if="{{tabIndex=='1'}}" class="type-item" src="/image/lanpai2.png" bindtap="changeTab" data-index="0"></image>
<image wx:if="{{tabIndex=='0'}}" class="type-item" src="/image/lanpai.png"></image>
<image wx:if="{{tabIndex=='0'}}" class="type-item ml40" src="/image/lvpai2.png" bindtap="changeTab" data-index="1"></image>
<image wx:if="{{tabIndex=='1'}}" class="type-item ml40" src="/image/lvpai.png"></image>
</view>
<view class="title mt20">请输入需要办理车辆的车牌号</view>
<view class="flxr license mt20" bindtap="openKeyBoard">
<view wx:for="{{code}}" class="edit-text {{index==0?'':'ml10'}} {{tabIndex=='1'?'colorG':''}}" wx:for-index="index">
<view>{{item.value}}</view>
<view wx:if="{{currentFocus==index&&isFocus}}" class="cursor"></view>
</view>
</view>
</view>
<view wx:if="{{showKeyBoard}}" class="friendlyAlert" catchtap="closeKeyBoard"></view>
<license-plate id="keyboard" wx:if="{{showKeyBoard}}" bindcloseKeyBoard="closeKeyBoard" bindinputProvince="inputProvince" bindinputCity="inputCity" bindinputLicense="inputLicense" bindbackspace="backspace"></license-plate>input-license.wxss
.top-part{
width: 100%;
height: 460rpx;
background: #fff;
border-radius: 12rpx;
padding: 24rpx;
}
.middle-part{
width: 100%;
height: 300rpx;
background: #fff;
border-radius: 12rpx;
padding:0 32rpx;
}
.middle-part .middle-item{
height: 33%;
width: 100%;
padding: 29rpx 0;
}
.chooseType{
height: 80rpx;
width: 100%;
}
.type-item{
height:80rpx;
width: 200rpx;
}
.license{
height: 94rpx;
width: 100%;
}
.edit-text{
height: 94rpx;
width: 66rpx;
position: relative;
border: 1rpx solid #4E92EF;
border-radius: 6rpx;
line-height: 94rpx;
text-align: center;
font-size: 36rpx;
}
.cursor {
width: 36rpx;
height: 4rpx;
background-color: #333333;
animation: focus 1.2s infinite;
position: absolute;
left: 50%;
margin-left: -18rpx;
bottom: 14rpx;
}
.friendlyAlert{
height: 100%;
width: 100%;
position: absolute;
top: 0;
}
.colorG{
border: 1rpx solid #5BCA92;
}
.tips{
color: #91959C;
font-size: 22rpx;
}
发表评论 取消回复