史上最完美的Android沉浸式状态导航栏攻略

article/2025/8/24 8:20:32

前言

最近我在小破站开发一款新App，叫高能链。我是一个完美主义者，所以不管对架构还是UI，我都是比较抠细节的，在状态栏和导航栏沉浸式这一块，我还是踩了挺多坑，费了挺多精力的。这次我将我踩坑，适配各机型总结出来的史上最完美的Android沉浸式状态导航栏攻略分享给大家，大家也可以去 高能链官网 下载体验一下我们的App，实际感受一下沉浸式状态导航栏的效果（登录，实名等账号相关页面由于不是我开发的，就没有适配沉浸式导航栏啦，嘻嘻）

注：此攻略只针对 Android 5.0 及以上机型，即 minSdkVersion >= 21

实际效果

在开始攻略之前，我们先看看完美的沉浸式状态导航栏效果

传统三键式导航栏

客态列表页_三键式

客态详情页_三键式

全面屏导航条

客态列表页_导航条

客态详情页_导航条

理论分析

在上具体实现代码之前，我们先分析一下，实现沉浸式状态导航栏需要几步

  1. 状态栏导航栏底色透明

  2. 根据当前页面的背景色，给状态栏字体和导航栏按钮（或导航条）设置亮色或暗色

  3. 状态栏导航栏设置透明后，我们页面的布局会延伸到原本状态栏导航栏的位置，这时候需要一些手段将我们需要显示的正文内容回缩到其正确的显示范围内

    这里我给大家提供以下几种思路，大家可以根据实际情况自行选择：

    • 设置fitsSystemWindows属性
    • 根据状态栏导航栏的高度，给根布局设置相应的paddingTop和paddingBottom
    • 根据状态栏导航栏的高度，给需要移位的控件设置相应的marginTop和marginBottom
    • 在顶部和底部增加两个占位的View，高度分别设置成状态栏和导航栏的高度
    • 针对滑动视图，巧用clipChildren和clipToPadding属性（可参照高能链藏品详情页样式）

沉浸式状态栏

思路说完了，我们现在开始进入实战，沉浸式状态栏比较简单，没什么坑

状态栏透明

首先第一步，我们需要将状态栏的背景设置为透明，这里我直接放代码

fun transparentStatusBar(window: Window) {window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)var systemUiVisibility = window.decorView.systemUiVisibilitysystemUiVisibility =systemUiVisibility or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLEwindow.decorView.systemUiVisibility = systemUiVisibilitywindow.statusBarColor = Color.TRANSPARENT//设置状态栏文字颜色setStatusBarTextColor(window, NightMode.isNightMode(window.context))
}

首先，我们需要将FLAG_TRANSLUCENT_STATUS这个windowFlag换成FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS，否则状态栏不会完全透明，会有一个半透明的灰色蒙层

FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS这个flag表示系统Bar的背景将交给当前window绘制

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN这个flag表示Activity全屏显示，但状态栏不会被隐藏，依然可见

SYSTEM_UI_FLAG_LAYOUT_STABLE这个flag表示保持整个View稳定，使View不会因为系统UI的变化而重新layout

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN和SYSTEM_UI_FLAG_LAYOUT_STABLE这两个flag通常是一起使用的，我们设置这两个flag，然后再将statusBarColor设置为透明，就达成了状态栏背景透明的效果

状态栏文字颜色

接着我们就该设置状态栏文字颜色了，细心的小伙伴们应该已经注意到了，我在transparentStatusBar方法的末尾加了一个setStatusBarTextColor的方法调用，一般情况下，如果是日间模式，页面背景通常都是亮色，所以此时状态栏文字颜色设置为黑色比较合理，而在夜间模式下，页面背景通常都是暗色，此时状态栏文字颜色设置为白色比较合理，对应代码如下

fun setStatusBarTextColor(window: Window, light: Boolean) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {var systemUiVisibility = window.decorView.systemUiVisibilitysystemUiVisibility = if (light) { //白色文字systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()} else { //黑色文字systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR}window.decorView.systemUiVisibility = systemUiVisibility}
}

Android 8.0以上才支持导航栏文字颜色的修改，SYSTEM_UI_FLAG_LIGHT_STATUS_BAR这个flag表示亮色状态栏，即黑色状态栏文字，所以如果希望状态栏文字为黑色，就设置这个flag，如果希望状态栏文字为白色，就将这个flag从systemUiVisibility中剔除

可能有小伙伴不太了解kotlin中的位运算，kotlin中的or、and、inv分别对应着或、与、取反运算

所以

systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()

翻译成java即为

systemUiVisibility & ~View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

在原生系统上，这么设置就可以成功设置状态栏文字颜色，但我发现，在某些系统上，这样设置后的效果是不可预期的，譬如MIUI系统的状态栏文字颜色似乎是根据状态栏背景颜色自适应的，且日间模式和黑夜模式下的自适应策略还略有不同。不过在大多数情况下，它自适应的颜色都是正常的，我们就按照我们希望的结果设置就可以了。

矫正显示区域

fitsSystemWindows

矫正状态栏显示区域最简单的办法就是设置fitsSystemWindows属性，设置了该属性的View的所有padding属性都将失效，并且系统会自动为其添加paddingTop（设置了透明状态栏的情况下）和paddingBottom（设置了透明导航栏的情况下）

我个人是不用这种方式的，首先它会覆盖你设置的padding，其次，如果你同时设置了透明状态栏和透明导航栏，这个属性没有办法分开来处理，很不灵活

获取状态栏高度

除了fitsSystemWindows这种方法外，其他的方法都得依靠获取状态栏高度了，这里直接上代码

fun getStatusBarHeight(context: Context): Int {val resId = context.resources.getIdentifier("status_bar_height", "dimen", "android")return context.resources.getDimensionPixelSize(resId)
}

状态栏不像导航栏那样多变，所以直接这样获取高度就可以了，导航栏的高度飘忽不定才是真正的噩梦

这里再给两个设置View margin或padding的工具方法吧，帮助大家快速使用

fun fixStatusBarMargin(vararg views: View) {views.forEach { view ->(view.layoutParams as? ViewGroup.MarginLayoutParams)?.let { lp ->lp.topMargin = lp.topMargin + getStatusBarHeight(view.context)view.requestLayout()}}
}fun paddingByStatusBar(view: View) {view.setPadding(view.paddingLeft,view.paddingTop + getStatusBarHeight(view.context),view.paddingRight,view.paddingBottom)
}

沉浸式导航栏

沉浸式导航栏相比沉浸式状态栏坑会多很多，具体原因我们后面再说

导航栏透明

和沉浸式状态栏一样，第一步我们需要将导航栏的背景设置为透明

fun transparentNavigationBar(window: Window) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {window.isNavigationBarContrastEnforced = false}window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)var systemUiVisibility = window.decorView.systemUiVisibilitysystemUiVisibility =systemUiVisibility or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATIONwindow.decorView.systemUiVisibility = systemUiVisibilitywindow.navigationBarColor = Color.TRANSPARENT//设置导航栏按钮或导航条颜色setNavigationBarBtnColor(window, NightMode.isNightMode(window.context))
}

在Android 10以上，当设置了导航栏栏背景为透明时，isNavigationBarContrastEnforced如果为true，则系统会自动绘制一个半透明背景来提供对比度，所以我们要将这个属性设为false

ps：状态栏其实也有对应的属性isStatusBarContrastEnforced，只不过这个属性默认即为false，我们不需要特意去设置

导航栏按钮或导航条颜色

和设置状态栏文字颜色一样，我这里就不多介绍了

fun setNavigationBarBtnColor(window: Window, light: Boolean) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {var systemUiVisibility = window.decorView.systemUiVisibilitysystemUiVisibility = if (light) { //白色按钮systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()} else { //黑色按钮systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR}window.decorView.systemUiVisibility = systemUiVisibility}
}

矫正显示区域

fitsSystemWindows

和状态栏使用一样，我就不重复说明了

获取导航栏高度

自从全面屏手势开始流行，导航栏也从原先的三键式，变成了三键式、导航条、全隐藏这三种情况，这三种情况下的高度也是互不相同的

三键式和导航条这两种情况我们都可以通过android.R.dimen.navigation_bar_height这个资源获取到准确高度，但现在很多系统都支持隐藏导航栏的功能，在这种情况下，虽然实际导航栏的高度应该是0，但是通过资源获取到的高度却为三键式或导航条的高度，这就给我们沉浸式导航栏的适配带来了很大困难

经过我的各种尝试，我发现只有一种方式可以准确的获取到当前导航栏的高度，那就是WindowInsets，至于WindowInsets是什么我就不多介绍了，我们直接看代码

/**
* 仅当view attach window后生效
*/
private fun getRealNavigationBarHeight(view: View): Int {val insets = ViewCompat.getRootWindowInsets(view)?.getInsets(WindowInsetsCompat.Type.navigationBars())//WindowInsets为null则默认通过资源获取高度return insets?.bottom ?: getNavigationBarHeight(view.context)
}

这里需要注意到我在方法上写的注释，只有当View和Window attach 后，才能获得到WindowInsets，否则为null，所以我一开始的想法是先检查View是否 attach 了Window，如果有的话则直接调用getRealNavigationBarHeight方法，如果没有的话，调用View.addOnAttachStateChangeListener方法，当出发attach回调后，再调用getRealNavigationBarHeight方法获取高度

这种方式在大部分情况下运行良好，但在我一次无意中切换了系统夜间模式后发现，获取到的导航栏高度变成了0，并且这还是一个偶现的问题，于是我尝试使用View.setOnApplyWindowInsetsListener，监听WindowInsets的变化发现，这个回调有可能会触发多次，在触发多次的情况下，前几次的值都为0，只有最后一次的值为真正的导航栏高度

于是我准备用View.setOnApplyWindowInsetsListener代替View.addOnAttachStateChangeListener，但毕竟一个是setListener，一个是addListener，setListener有可能会把之前设置好的Listener覆盖，或者被别的Listener覆盖掉，再考虑到之后会提到的底部Dialog沉浸式导航栏适配的问题，我折中了一下，决定只对Activity下的rootView设置回调

以下是完整代码

private class NavigationViewInfo(val hostRef: WeakReference<View>,val viewRef: WeakReference<View>,val rawBottom: Int,val onNavHeightChangeListener: (View, Int, Int) -> Unit
)private val navigationViewInfoList = mutableListOf<NavigationViewInfo>()private val onApplyWindowInsetsListener = View.OnApplyWindowInsetsListener { v, insets ->val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets, v)val navHeight =windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()).bottomval it = navigationViewInfoList.iterator()while (it.hasNext()) {val info = it.next()val host = info.hostRef.get()val view = info.viewRef.get()if (host == null || view == null) {it.remove()continue}if (host == v) {info.onNavHeightChangeListener(view, info.rawBottom, navHeight)}}insets
}private val actionMarginNavigation: (View, Int, Int) -> Unit ={ view, rawBottomMargin, navHeight ->(view.layoutParams as? ViewGroup.MarginLayoutParams)?.let {it.bottomMargin = rawBottomMargin + navHeightview.requestLayout()}}private val actionPaddingNavigation: (View, Int, Int) -> Unit ={ view, rawBottomPadding, navHeight ->view.setPadding(view.paddingLeft,view.paddingTop,view.paddingRight,rawBottomPadding + navHeight)}fun fixNavBarMargin(vararg views: View) {views.forEach {fixSingleNavBarMargin(it)}
}private fun fixSingleNavBarMargin(view: View) {val lp = view.layoutParams as? ViewGroup.MarginLayoutParams ?: returnval rawBottomMargin = lp.bottomMarginval viewForCalculate = getViewForCalculate(view)if (viewForCalculate.isAttachedToWindow) {val realNavigationBarHeight = getRealNavigationBarHeight(viewForCalculate)lp.bottomMargin = rawBottomMargin + realNavigationBarHeightview.requestLayout()}//isAttachedToWindow方法并不能保证此时的WindowInsets是正确的，仍然需要添加监听val hostRef = WeakReference(viewForCalculate)val viewRef = WeakReference(view)val info = NavigationViewInfo(hostRef, viewRef, rawBottomMargin, actionMarginNavigation)navigationViewInfoList.add(info)viewForCalculate.setOnApplyWindowInsetsListener(onApplyWindowInsetsListener)
}fun paddingByNavBar(view: View) {val rawBottomPadding = view.paddingBottomval viewForCalculate = getViewForCalculate(view)if (viewForCalculate.isAttachedToWindow) {val realNavigationBarHeight = getRealNavigationBarHeight(viewForCalculate)view.setPadding(view.paddingLeft,view.paddingTop,view.paddingRight,rawBottomPadding + realNavigationBarHeight)}//isAttachedToWindow方法并不能保证此时的WindowInsets是正确的，仍然需要添加监听val hostRef = WeakReference(viewForCalculate)val viewRef = WeakReference(view)val info =NavigationViewInfo(hostRef, viewRef, rawBottomPadding, actionPaddingNavigation)navigationViewInfoList.add(info)viewForCalculate.setOnApplyWindowInsetsListener(onApplyWindowInsetsListener)
}/**
* Dialog下的View在低版本机型中获取到的WindowInsets值有误，
* 所以尝试去获得Activity的contentView，通过Activity的contentView获取WindowInsets
*/
@SuppressLint("ContextCast")
private fun getViewForCalculate(view: View): View {return (view.context as? ContextWrapper)?.let {return@let (it.baseContext as? Activity)?.findViewById<View>(android.R.id.content)?.rootView} ?: view.rootView
}/**
* 仅当view attach window后生效
*/
private fun getRealNavigationBarHeight(view: View): Int {val insets = ViewCompat.getRootWindowInsets(view)?.getInsets(WindowInsetsCompat.Type.navigationBars())return insets?.bottom ?: getNavigationBarHeight(view.context)
}

我简单解释一下这段代码：为所有需要沉浸的页面的根View设置同一个回调，并将待适配导航栏高度的View添加到列表中，当WindowInsets回调触发后，遍历这个列表，判断触发回调的View的host是否与待适配导航栏高度的View对应，对应的话则处理View适配导航栏高度

这里需要注意，WindowInsets的分发其实是在dispatchAttachedToWindow之后的，所以isAttachedToWindow方法并不能保证此时的WindowInsets是正确的，具体可以去看ViewRootImpl中的源码，关键方法：dispatchApplyInsets，这里判断isAttachedToWindow并设置高度是为了防止出现View已经完全布局完成，之后再也不会触发OnApplyWindowInsets的情况

这里我也测试了内存泄漏情况，确认无内存泄漏，大家可以放心食用

底部Dialog适配沉浸式

底部Dialog适配沉浸式要比正常的Activity更麻烦一些，主要问题也是集中在沉浸式导航栏上

获取导航栏高度

仔细的小伙伴们可以已经注意到了我在沉浸式导航栏获取高度那里代码中的注释，Dialog下的View在低版本机型（经测试，Android 9一下就会有这个问题）中获取到的WindowInsets值有误，所以尝试去获得Activity的contentView，通过Activity的contentView获取WindowInsets

LayoutParams导致的异常

在某些系统上（比如MIUI），当我window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)时，沉浸式会出现问题，状态栏会被蒙层盖住，Dialog底部的内容也会被一个莫名其妙的东西遮挡住

我的解决方案是，window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)，然后布局最外层全部占满，内部留一个底部容器

<!-- dialog_pangu_bottom_wrapper -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent"><FrameLayoutandroid:id="@+id/pangu_bottom_dialog_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:clickable="true"android:focusable="true" /></FrameLayout>

然后在代码中重写setContentView方法

private var canceledOnTouchOutside = trueoverride fun setContentView(layoutResID: Int) {setContentView(LayoutInflater.from(context).inflate(layoutResID, null, false))
}override fun setContentView(view: View) {setContentView(view,ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT))
}override fun setContentView(view: View, params: ViewGroup.LayoutParams?) {val root =LayoutInflater.from(context).inflate(R.layout.dialog_pangu_bottom_wrapper, null, false)root.setOnClickListener {if (canceledOnTouchOutside) {dismiss()}}val container = root.findViewById<ViewGroup>(R.id.pangu_bottom_dialog_container)container.addView(view, params)super.setContentView(root,ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT))
}override fun setCanceledOnTouchOutside(cancel: Boolean) {super.setCanceledOnTouchOutside(cancel)canceledOnTouchOutside = cancel
}

这样的话视觉效果就和普通的底部Dialog一样了，为了进一步减小底部Dialog显示隐藏动画之间的差异，我将动画插值器从linear_interpolator换成了decelerate_interpolator和accelerate_interpolator

<!-- dialog_enter_from_bottom_to_top -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"android:duration="300"android:fromYDelta="100%"android:interpolator="@android:anim/decelerate_interpolator"android:toYDelta="0" />

<!-- dialog_exit_from_top_to_bottom -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"android:duration="300"android:fromYDelta="0"android:interpolator="@android:anim/accelerate_interpolator"android:toYDelta="100%" />

尾声

自此，目前沉浸式遇到的问题全部都解决了，如果以后发现了什么新的问题，我会在这篇文章中补充说明，如果还有什么不明白的地方可以评论，我考虑要不要拿几个具体的场景实战讲解，各位看官老爷麻烦点个赞收个藏不迷路😄


http://chatgpt.dhexx.cn/article/4jLVO7u2.shtml

相关文章

Android设置“沉浸式状态栏”的方法

Android设置“沉浸式状态栏”的方法

Android系统界面构成 Android系统界面由状态栏、ActionBar和导航栏组成&#xff0c;如下图所示&#xff1a; “沉浸式状态栏”的界面显示效果 沉浸式状态栏&#xff0c;或叫“透明状态栏”&#xff0c;显示效果如下图所示&#xff1a; 实现沉浸式状态栏的步骤 一、添加StatusB…
阅读更多...
Android沉浸式状态栏（透明系统状态栏）

Android沉浸式状态栏（透明系统状态栏）

Android沉浸式状态栏&#xff08;透明系统状态栏&#xff09;的目的&#xff1a;顶部系统状态栏和App的导航栏一体化&#xff0c;不给用户突兀的感觉&#xff0c;使用户把更多的视角留在我们的App上。 沉浸式状态栏的兼容情况 Android版本透明状态栏<4.44.4-5.0✓>5.0✓…
阅读更多...
沉浸式状态栏

沉浸式状态栏

沉浸式状态栏 简单介绍 沉浸式状态栏其实是对沉浸模式（Immersive Mode）在状态栏上的体现，即让状态栏变透明，或者是在打游戏和看视频时彻底隐藏起状态栏，让用户拥有良好的体验。 比如说我们看视频，状态栏隐藏后视频的观看会更加完整，下图就是看视频时的截图，可以看到当…
阅读更多...
Android沉浸式状态栏，看完这篇就够了！

Android沉浸式状态栏，看完这篇就够了！

背景 之前做过Android沉浸式状态栏的相关需求&#xff0c;但是一直忙于工作&#xff0c;没时间系统的整理下沉浸式相关的知识&#xff0c;所以今天抽出时间&#xff0c;写一篇 Android沉浸式状态栏的文章。 何为沉浸式 沉浸式就是要给用户提供完全沉浸的体验&#xff0c;使用…
阅读更多...
图片预览与下载

图片预览与下载

后端返回base64进行图片的预览和下载下载 有一个图片预览的接口。后端返回的值长这个样子 1、预览 如果要在线预览的话&#xff0c;代码需要这样写放入img的src this.imgPreviewBaseUrl data:image/png;base64, res.data标签中就是这样的 2、下载 图片预览的这样的返…
阅读更多...
vue 实现图片预览

vue 实现图片预览

vue实现图片预览 现在很多的项目里面图片展示缩略图,然后点击实现图片预览,放大的功能 最近我的项目里面就遇见了这么个场景,我选用了插件进行处理 下面说下实现步骤 1、首先安装插件 npm install vue-photo-preview --save插件地址 2、在main.js里面引入,全局使用 impor…
阅读更多...
图片预览器

图片预览器

此预览器&#xff0c;一次只能翻页十张图片&#xff0c;开发人员可根据自己需要&#xff0c;修改前台代码。 页面代码 <% Page Language"C#" AutoEventWireup"true" CodeBehind"UpFilesAndPreview.aspx.cs" Inherits"WebFramework.Comm…
阅读更多...
v-viewer图片预览

v-viewer图片预览

安装 npm install v-viewer引入 import Viewer from v-viewer import viewerjs/dist/viewer.css Vue.use (Viewer, {defaultOptions: {navbar: true,toolbar: false,movable: false,title: false,zoomable: true,scalable: true,transition: true} })使用 方法一&#xff1a…
阅读更多...
vue2图片预览插件

vue2图片预览插件

文章目录 学习链接准备工作准备图片与基础的样式PrevImg.vueApp.vue静态效果 封装插件修改PrevImg.vue定义插件逻辑main.js中应用此插件App.vue中使用此插件 图片预览列表修改App.vue修改插件逻辑修改PrevImg.vue 学习链接 vue插件开发实例-图片预览插件 vue2-pre-img-plugin的…
阅读更多...
vue 图片预览插件

vue 图片预览插件

vue 图片预览插件 步骤 1、先安装依赖 npm install v-viewer --save2、main.js内引用并注册调用 //main.js import Viewer from v-viewer import viewerjs/dist/viewer.cssVue.use(Viewer); Viewer.setDefaults({Options: { "inline": true, "button": …
阅读更多...
Vue3图片预览（Image）

Vue3图片预览（Image）

本图片预览组件主要包括以下功能&#xff1a; 展示图片时&#xff0c;可设置鼠标悬浮时的预览文本&#xff1b;图像无法加载时要显示的描述&#xff1b;自定义图像高度和宽度&#xff1b;设置图像如何适应容器高度和宽度&#xff08; fill(填充) | contain(等比缩放包含) | cov…
阅读更多...
Vue实现图片预览和缩放功能

Vue实现图片预览和缩放功能

使用v-viewer插件即可实现图片预览和缩放功能。&#xff08;v-viewer是一款支持vue项目中的图片浏览组件&#xff0c;它支持图片旋转、缩放、翻转等操作&#xff0c;支持配置化.非常强大&#xff09; 安装依赖 执行命令&#xff1a; npm install v-viewer --save 引入并使用…
阅读更多...
图片上传预览功能

图片上传预览功能

大多时候我们上传图片&#xff0c;都是直接上传到服务器上&#xff0c;然后返回图片资源所在服务器的路径&#xff0c;然后页面根据这个路径&#xff0c;给图片一个src 属性就能看到图片了。 但是&#xff0c;这样会有一个弊端&#xff1a;如果客户对自己上传的图片不满意&am…
阅读更多...
uniapp 图片预览实现

uniapp 图片预览实现

uniapp 图片预览实现 提示&#xff1a;下面案例可供参考 一、app端 使用 uni.previewImage 进行图片预览 可去 uniapp官网 查看具体使用:(https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject) 二、具体使用如下&#xff08;示例&#xff09;&#xf…
阅读更多...
Android中点击图片进行图片预览功能的实现（ImagePreview图片预览工具库）

Android中点击图片进行图片预览功能的实现（ImagePreview图片预览工具库）

因为需求&#xff0c;对于轮播图进行一个点击预览的功能&#xff0c;看了好多的文章&#xff0c;都没有弄出来&#xff0c;还是多亏了昊昊猿博主 点击查看原文 终于把它搞定啦。 这里的话是使用ImagePreview&#xff0c;一个非常好用的图片预览工具库&#xff08;还可以实现双…
阅读更多...
Vue实现图片预览（Viewer.js）

Vue实现图片预览（Viewer.js）

Viewer.js viewer.js是一款开源的图片预览插件&#xff0c;功能十分强大: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转&#xff08;类似微博的图片旋转&#xff09; 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式&#xff08;可做屏保&#xff0…
阅读更多...
前端图片预览怎么做？Vue

前端图片预览怎么做？Vue

选择的图片文件&#xff0c;要给到img标签上纯前端的预览 让用户更近一步看到自己选择的头像 因为img的标签的src的值只能是以下两个 1、只能是图片的“链接地址”&#xff08;外链http://开头&#xff0c;图片文件相对路径&#xff09;(不能发给后台)因为第一种转成http是存…
阅读更多...
点击图片实现大图预览

点击图片实现大图预览

实现点击图片预览 这次主要是在table表格里能够实现&#xff0c;点击里面的图片实现大图预览的效果&#xff0c;直接找的现成的轮子&#xff0c;用在项目里。这里主要是讲讲用viewer组件实现点击图片预览&#xff0c;用的组件&#xff0c;只需在本地安装或者引入。 先看一下&…
阅读更多...
ImagePreview 图片预览 的使用​

ImagePreview 图片预览 的使用​

一、ImagePreview 图片预览 的使用 ImagePreview 是一个函数&#xff08;必须使用按需到处&#xff09;&#xff0c;调用函数后会直接在页面中展示图片预览界面。 // 实现图片预览 import { ImagePreview } from vant 二、处理图片点击预览 思路&#xff1a; 1、从文章内容中…
阅读更多...
图片预览（原生js实现）

图片预览（原生js实现）

功能描述 很多网站都是使用浏览器自带图片浏览功能&#xff0c;但看起来很low&#xff0c;想手动实现图片预览功能&#xff0c;点击图片弹出大图预览框在屏幕中间显示&#xff0c;根据图片宽高自适应屏幕大小 效果图 具体代码实现 页面preview.html <!DOCTYPE html> …
阅读更多...
推荐文章

Copyright @ 2022~2023