# UniApp iOS 滚动穿透实现指南
在开发移动应用时，特别是在 iOS 环境下，常常会遇到“滚动穿透”的需求。滚动穿透意味着在一个滚动元素（如弹出层、模态框等）上进行滚动时，能够滚动到背后的内容。Imagine this situation: you have a modal that you want to show content above the background. When
无论小程序的时候一般有这个功能,在页面处于首页时候,滑动视图,切换视图顶部滚动导航也跟着切换 1.想要实现这个功能就需要实现顶部导航栏,首先实现顶部滚导航栏 点击高亮颜色显示 模板代码<scroll-view scroll-x="true" class="scroll-content" >
//滑动导航栏数组
<view v-for="(item,index) in topB
1 flex布局 flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。1.1 flex-direction 容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。
转载
2024-05-14 21:22:35
95阅读
需求：场景类似驾校刷题，手指从左往右大幅度滑动切换至上一题，手指从右往左大幅度滑动切换至下一题。已答题目直接显示正确与否和答案状态，所选答案不存在后端，后端只保存该题是否答过、答对还是答错的状态。获取题目时避免多次前后端交互，故做成分页形式：交互一次获取10道题目。思考：直接做切换页面虽然效果正确，但是相邻题作答状态无法保留。原本想过使用uView轮播图swiper或者类型组件来做，但是实现后出现
转载
2023-12-07 07:00:13
539阅读
最近涉及到uniapp 开发小程序和h5 做的一个长列表，遇到有几个需要注意的地方，在此写个记录提醒健忘的自己避免踩坑。原始实现方式：首先一个正常的列表都是有一个 tab 来做头部选项卡和一个内部区域，通过手指的滑动可以切换选项卡。然后传统都是采用swiper 加 scroll-view实现（tab 因为没什么性能上的问题就不说了）。但是有时候程序并不能如你所愿，通过这两个组件实现的列
最近 项目中有一个需求 PC端动态设计的表单 移动端要能渲染出来那么 就要去找到对应的组件 而其中 没有的 就包括滑块 没有又能怎么办 只能自己封装一个我们直接上代码<template>
<view class="u-slider" @tap="onClick" :class="[disabled ? 'u-slider--disabled' : '']" :style="{
转载
2023-12-14 03:14:13
310阅读
# 解决uniapp在iOS上滚动不适应的问题
在使用uniapp开发跨平台应用时，可能会遇到在iOS上滚动不适应的问题，即在iOS设备上滚动页面时出现卡顿或者不流畅的情况。这可能是由于uniapp在iOS上的渲染机制与Android有所不同，导致滚动效果不佳。本文将介绍解决这一问题的方法，并提供相应的代码示例。
## 问题分析
uniapp是一款基于Vue.js开发的跨平台应用框架，它可以
原创
2024-06-26 05:13:26
450阅读
使用uni-app后能够做出更多类型的小程序相当于做一个就能够打包解析匹配更多端小程序，就不用每个端的都要去改首先我们来看看uni-app的官网吧一。官网介绍uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。快速上手通过 HBu
持续更新记录开发中遇到的问题 ^^1.变量储存本地图片路径，前面加 require('图片路径')；2.样式穿透不生效，在script里引入options: { styleIsolation: 'shared' }，如果还是不生效或者样式乱套，可以把样式放到引用它的父组件；3.uniapp开发小程序插槽传值，父组件接收;官方文档是这样写的
v-slot:插槽名="数据"
但不会生效加个花
uni-app 之 聊天室滚到最底部 请注意 ！： 知识点为uni-app 与 vue 结合 这次写到聊天室，碰到一个emmmmm问题比较严重的事情，聊天嘛，咱们想实现的就无非是微信，QQ那种聊天的效果嘛，我们研究了，，，，emmmm （n久之长），终于是把这个功能写出来了，代码等什么时候整理出来给大家看，今天主要说一下碰到的一个问题，就是我发送消息的时候， 想要将消息
转载
2023-10-12 11:27:16
359阅读
页面效果如下，从零开始搭建主页面图1主页面上效果 图1 主页面下效果 1、配置下面五个tabBar页面1、主类的配置信息 pages：配置每个页面基础信息以及路由信息 tabBar：配置导航栏的具体信息 globalStyle：全局的页面信息 2、app-plus配置（配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持） 3、titleNView导航栏的配置官网的titileNV
## Uniapp允许滚动iOS右边出现空白
### 什么是Uniapp
[Uniapp](
### 滚动iOS右边出现空白问题
在Uniapp开发中，有时候我们会遇到一个问题，即在iOS平台上滚动页面时，右边会出现一片空白区域。这个问题是由于iOS默认的`body`样式导致的。
在iOS上，默认情况下，`body`元素的`webkitOverflowScrolling`属性设置为`to
原创
2023-12-18 08:08:04
468阅读
(check.png)(checkbox.png)(checkDisable.png)以上三张图是我的可选择状态，已选中，以及不可选择等三种；接下来来写几种使用情景；具体样式我不再细写了，只说逻辑，需要说明image需要放在你所选择的循环里，比如如下，仅做展示，样式可以根据需要写1：只支持单选，并且都可以选择 <image v-if="orderarr.length!=0" @click=
转载
2024-07-15 22:49:35
396阅读
# 如何实现“uniapp 上下滚动ios右边出现空白”
## 引言
在开发uniapp时，我们经常会遇到一些问题。有一位刚入行的小白遇到了一个问题，他不知道如何实现“uniapp 上下滚动ios右边出现空白”。作为经验丰富的开发者，我将向他详细解释如何实现这个功能。
## 步骤流程
下面是整个实现过程的步骤流程：
```mermaid
flowchart TD
A[创建新的uni
原创
2023-12-17 10:31:15
255阅读
<scroll-view scroll-x="true" class="scroll"> <view class="scroll-box"> 11 </view> <view class="scroll-box"> 22 </view> <view class="scroll-box"> 33 </view>.
原创
2021-02-04 10:33:34
143阅读
<scroll-view scroll-x="true" class="scroll"> <view class="scroll-box"> 11 </view> <view class="scroll-box"> 22 </view> <view class="scroll-box"> 33 </view>.
原创
2021-02-04 10:33:34
470阅读
uniapp中IOS系统禁用滚动弹性的解决方案
在使用uniapp进行开发时，有些开发者发现iOS系统上的滚动弹性（Bouncing Effect）有时会影响用户体验，尤其是在浏览器中的表现。为了确保在ios设备上禁用滚动弹性，本文将分享一些实用步骤，包括版本对比、迁移指南、兼容性处理、实战案例、排错指南和生态扩展。这将帮助开发者更顺利地进行适配和开发。
### 版本对比
对于uniapp不
效果图：代码如下：<template>
<view style="background-color: white; min-height: 1200rpx;">
<view
style="width: 100%; height: 100rpx; display: flex; justify-content: center; align-items: cen
转载
2024-09-03 10:46:53
87阅读
# 让 iOS 不滚动的方法：UniApp JS 深入解析
在开发跨平台应用时，使用 UniApp 是一个非常流行的选择。UniApp 允许开发者使用 Vue.js 语法构建应用，并能够在多个平台上运行，其中包括 iOS。然而，在 iOS 平台上，开发者常常会遇到一个问题：页面内容在某些条件下会出现不必要的滚动。本文将探讨如何有效地解决这个问题，并提供相应的代码示例来帮助大家理解。
## 1.
前言：如果左边数据少的话其实可以不用scroll-view，直接弄出一块一块可以点击的就行，我这里是数据还没有确定，所以需要写个scroll-view提前准备，因为数据多和少都可以使用scroll-view-----------------------------------------------------无情的分割线--------------------------------------
转载
2024-01-30 01:24:54
630阅读
