Uni-App之Vue组件（三）

uni-app支持的通用css单位包括px,rpx

vue页面支持普通H5单位，但在nvue里不支持；

nvue页面还不支持百分比单位

App端，在pagesjson里的titleNView或页面里写的plus api中涉及的单位，只支持px，此时不支持rpx。

nvue中，uni-app模式可以使用px,rpx表现与vue中一致，weex模式目前遵循weex的单位；

点击切换实现路由跳转

实现方法： 一、在indexvue的页面入口写一个点击方法，利用uninavigateTo({})写上将要跳转的页面路径。

                二、 components文件里面创建headerNavvue组件

                三、在pagesjson文件里写上组件路径进去

这里可以选择修改对应的样式信息

scroll-view属性说明：

横向滚动通过添加scroll-x="true"，并且需要在scroll-view的上一级加上row，完成横向滚动

纵向滚动条通过添加scroll-y="true",并且使用scroll-view来配合完成纵向滚动轴

属性说明：

view的属性说明：

属性说明：

由于 icon 组件各端表现存在差异，可以通过使用字体图标的方式来弥补各端差异。

属性说明：

各平台type值的有效说明：

需求就是两点：

1，页面滚动到该导航位置吸顶

2，导航tabs切换带动画，包括下划线

效果如下：

首先是可滑动，用 scroll-view 实现，然后吸顶效果是在Dcloud是在市场找的，下划线滑动动画是插件市场 这个插件 改来的，show code：

至于动画那部分的实现的计算逻辑，可以去插件市场看看上面提到的那个插件，我本来直接也是用那个插件，但是各种不适用，所以拿出来了我自己需要的部分。

解决方法：

采用异步处理settimeout函数获取最新的scrollheight 让他先全部执行完了之后去走这个异步，这样就能确保滚动条每次滚到的都是最底部 。

最后实现了每次聊天都是滚到最底部 要是想要进入页面就滚到最底部呢 我们是在socket链接读取文件的时候调用了这个方法。

最近在做一个uniapp的项目的时候，碰到了一个Tab选项卡的需求，我立马就想到了曾经在视频里看到的利用swiper实现丝滑选项卡的功能。

但是很遗憾，我并没有光看就会的本事，本着遇事不决先百度的原则，就在百度找了一篇真实有用，但是有小小bug的，下面是原po地址：

uni-app使用swiper切换页面每个滑块高度自适应

懒得点的可以接着往下看哈，我也会把详细步骤以及碰到的bug贴出来。下面是我改造后的效果图

首先就是Tab选项卡的点击切换块，这里我是用了小程序自带的scroll-view来实现的，同时给该元素添加scroll-into-view属性来实现点击跟踪（其实这效果不是特别好，我期望的效果是点击这个的时候还留点位置给上一个，但是我太菜了加上为了省事所以就直接用这个了）

scroll-into-view的用法可自行查阅官方文档

接着是swiper标签块，这里因为实现都一样，所以我就直接把原博客那边的贴过来了，大家根据自己的需求更改类名及swiper-item内部的组件即可

这里有个注意点，就是要给swiper-item内部的组件(盒子)一个相同的类名，后面获取高度时需要用到。

初始数据方面，这里我也把我的初始数据贴出来，大家根据需求自行修改即可

后面的方法本来想一个个贴的，但是发现好像有点乱，所以就直接全贴出来了，里面的逻辑大伙应该能理清吧哈哈

到这里js部分也结束了，最后是css部分，我就是在这里踩坑的。原博最后面说要给swiper-item里面的组件设置一个min-height: 100%。这样设置之后就会有个问题，也就是

因此大家在初始化css数据的时候需要注意一下，这里我也把我的初始css贴出来，大家根据需求自行修改即可

到这里这一块的内容就全部结束了，噢对了关于setSwiperHeight里面获取dom元素的方法，也就是

unicreateSelectorQuery() 。这玩意说实话我也搞不太懂，总之就跟selectorQuery选择器差不多，CVM大法：复制粘贴，然后修改数据即可。

第一次正经写文还是很紧张的哈哈，希望能帮到有需要的人。谢谢各位

第一：先在Appvue中全局获取不同手机的顶部高度

在methods:{

getPhoneHeight(){

let that =this

unigetSystemInfo({

success:function(res){

thatglobalDataphoneHeight=resstatusBarHeight

}

})

}

}

第二步

在components中写公共组件

uni-topBarvue

<template>

<view class="nav-box" style="margin-top:{{phoneHeight}}px">

<view class='nav-top-one'>

<image src='/static/images/tbackpng' class="nav-top-left" @click="backpage"></image>

<view class="nav-top-center"></view>

<image src='/static/images/homepng' class="nav-top-right" @click="BackHome"></image>

</view>

<view class="nav-top-text">{{titleNameaddredd}}</view>

</view>

</template>

<script>

// app中的全局需要在每个页面进行引入

import app from '/Appvue'

export default {

//

name: "uniNavBar",

// 接受父组件的传值，可以接受多个中 在父组件中用v-bind 来绑定

props: {

// 接受父组件的传值

titleName: {

type: Object

}

},

data() {

return {

phoneHeight:appglobalDataphoneHeight //这里在进行调用

};

},

// 事件

methods: {

backpage() {

uninavigateBack({

delta: 1

});

},

BackHome(){

// 关闭当前页面

uniswitchTab({

url: '/pages/index/index'

});

}

},

// 生命周期

</script>

<style>

nav-box {

position:relative;

padding-left: 16rpx;

background:#ffffff;

height:76rpx;

</style>

第三步：

在需要的页面进行引入 和vue引入公共组件的方法一样

html:

<uniNavBar :titleName="topData"></uniNavBar>

js:

import uniNavBar from "///components/uni-nav-barvue"

components:{

uniNavBar

},

最后效果显示

悟空—不死谢谢

以上就是关于Uni-App之Vue组件（三）全部的内容，包括:Uni-App之Vue组件（三）、uni-app吸顶+带动画滑动的tabs导航栏、uniapp聊天页面内容滑倒底部闪一下怎么解决等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！