uniapp开发手机app--页面左右滑动swiper效果实现

最新推荐文章于 2024-04-13 16:14:03 发布
最新推荐文章于 2024-04-13 16:14:03 发布
阅读量561 收藏
点赞数
分类专栏： Vue学习 前端高频面试题 uniapp 文章标签： uni-app 前端 javascript 开发语言 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44632398/article/details/132354927
版权

uniapp开发手机app–页面左右滑动swiper效果实现

uniapp开发手机app–页面左右滑动swiper效果实现，跟平常swiper使用没有太多差别，区别在于检测，获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满

mounted() {
   
		var that = this;
		//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
		uni.getSystemInfo({
   
			success: function
了解本专栏 订阅专栏 解锁全文 超级会员免费看
低级前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
uniapp 滑动点击效果
DumBnessA的博客
06-21 550
uniapp 滑动点击效果 <template> <view class="big"> <view class="trade"> <view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr"> 第一个页面 </view> <view class="texts" :class="curr==1?'active':''"
uniapp使用轮播组件swiper，添加左右滑动按钮
S筱潇S四维Smile
01-30 2300
uniapp使用轮播组件swiper，添加左右滑动按钮
uniapp，小程序使用swiper消息滚动
yqlnihao的博客
07-14 1012
<view class="scllor"> <view class="swiper-view"> <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000"> <block v-for="item in msgList"> <swiper-item> <view cla.
swiper左右滑动.zip
11-21
利用Swiper实现移动端Table切换，页面可左右滑动，加动画移动效果
小白总结uniapp自定义导航栏（可点击可左右滑动切换页面）
最新发布
m0_69848498的博客
04-13 1005
uniapp超简单自定义导航栏实现点击滑动切换，适合新手小白
左右滑动swiper
sinat_38992528的博客
01-29 864
转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml   红色   绿色   黄色             红色内容               绿色内容               黑色内容       .wxs
uniapp动态实现滑动导航效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
08-03 808
uniapp动态实现滑动导航效果demo
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
09-11
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。 movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例
11-19
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例 仅可供学习研究
uniapp模板--主页
06-06
uni-app页面含轮播，flex布局，饼状图，折线图，应用swiper的等
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
10-17
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
swiper滑动-上下左右滑动结合
05-19
swiper各种滑动demo，还有左右滑动中间嵌入上下滑动，代码简介，案例多，种类全，之后在我的博客里，也会有些swiper滑动使用得介绍(加入动画,左右滑动嵌入上下滑动)
swiper手机端左右滑动天气预报代码.zip
07-11
swiper手机端左右滑动天气预报代码是一款实时天气地理定位，手机天气预报，搜狐的天气预报数据。
uni-app根据swiper实现左右滑动切换
weixin_47478730的博客
02-12 1895
<template> <view> <u-sticky class="srickTop"> <u-tabs style="background-color: #F5F5F5;height: 110rpx;" :list="list1" :current="current" :scrollable="true" @change="switchtab"></u-tabs> ...
uniapp超级丝滑的滑块效果，可跟随手指拖动
qq_41200621的博客
11-04 857
【代码】uniapp超级丝滑的滑块效果，可跟随手指拖动。
【uniapp小程序】使用swiper实现页面内部左右滑动的切换
qq_57219457的博客
08-23 5900
uniapp小程序页面内滚动、方便自己cv
给uniapp的swiper添加左右翻页按钮
weixin_45897146的博客
07-16 5606
<swiper class="swiper" :current="curDot" @change="swiperChange"> <swiper-item v-for="(item, index) in list" :key="index"> <view class="swiper-item uni-bg-red">{{item}}</view> </swiper-item> </swiper> 首先个swiper绑定 :.
uni-app实现左右滑动菜单，模拟小米手机桌面菜单应用
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-16 510
【代码】uni-app实现左右滑动菜单，模拟小米手机桌面菜单应用。
uniapp微信小程序 ios端部分机型屏幕可左右滑动原因即处理
cf
07-06 2558
微信小程序 ios 适配
uniapp实现左右滑动切换页面
05-10
要实现左右滑动切换页面，可以使用uni-app提供的swiper组件，具体步骤如下： 1. 在页面中添加swiper组件： ```html <swiper :current="current" @change="swiperChange" :duration="500"> <swiper-item> <!-- 第1个页面内容 --> </swiper-item> <swiper-item> <!-- 第2个页面内容 --> </swiper-item> <swiper-item> <!-- 第3个页面内容 --> </swiper-item> </swiper> ``` 2. 在data中定义current变量，默认值为0表示当前显示第1个页面： ```js data() { return { current: 0 } } ``` 3. 在methods中添加swiperChange方法，监听swiper组件的change事件，更新current变量的值： ```js methods: { swiperChange(event) { this.current = event.detail.current; } } ``` 4. 在样式中设置swiper的宽度和高度，以及swiper-item的宽度和高度为100%： ```css swiper { width: 100%; height: 100%; } swiper-item { width: 100%; height: 100%; } ``` 5. 最后，使用touch事件监听用户的滑动操作，根据滑动的方向更新current变量的值，实现页面切换： ```js methods: { // 左右滑动切换页面 touchstart(event) { this.touchStartX = event.touches[0].pageX; }, touchend(event) { this.touchEndX = event.changedTouches[0].pageX; if (this.touchEndX - this.touchStartX > 50 && this.current > 0) { this.current--; } else if (this.touchEndX - this.touchStartX < -50 && this.current < 2) { this.current++; } } } ``` 完整代码如下： ```html <template> <swiper :current="current" @change="swiperChange" :duration="500"> <swiper-item> <!-- 第1个页面内容 --> </swiper-item> <swiper-item> <!-- 第2个页面内容 --> </swiper-item> <swiper-item> <!-- 第3个页面内容 --> </swiper-item> </swiper> </template> <script> export default { data() { return { current: 0, touchStartX: 0, touchEndX: 0 } }, methods: { swiperChange(event) { this.current = event.detail.current; }, touchstart(event) { this.touchStartX = event.touches[0].pageX; }, touchend(event) { this.touchEndX = event.changedTouches[0].pageX; if (this.touchEndX - this.touchStartX > 50 && this.current > 0) { this.current--; } else if (this.touchEndX - this.touchStartX < -50 && this.current < 2) { this.current++; } } } } </script> <style> swiper { width: 100%; height: 100%; } swiper-item { width: 100%; height: 100%; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

低级前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值