【uni-app】swiper的使用

这篇具有很好参考价值的文章主要介绍了【uni-app】swiper的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近在学习小程序的开发,其中有用到swiper,在这里记录一下我的学习历程

有一些人,他刚开始并不会开发小程序,但是在任务面前,没有什么是不可以学的…

刚开始接触到swiper的时候,是在uni-app的官方文档里,这可真是个好东西!这里附上官网链接,想了解的小伙伴直接传送~
官网里头有demo,可牛,但是似乎还是不太能满足我的需求。
我要做的是这么一个东西,假设这是我的小程序,中间蓝色部分是我要展示的内容,它是诸多卡片中的一个,我现在要左右滑动切换不同卡片,然后当滑动到最右边的时候,如果没有更多卡片了,就显示“没有更多内容了~”
【uni-app】swiper的使用
清楚了需求,我们就明确知道了,现在总共有两个难点:

  1. 如何在滑动过程中动态加载更多卡片,同时不让滑动过程出现卡顿或者其他影响用户体验的情况?
  2. 如何判断已展示到最后一个卡片,继续右滑就不再加载卡片了,而是提示用户没有更多了?

我们知道,使用这个组件的时候,是<swiper>里头包含着多个<swiper-item>,这样,我们每滑动一张卡片,就是滑动一个<swiper-item>,因此我们可以有这下面的思路:

while(向左滑动) {
	if(当前卡片是卡片数组里的最后一个item && 当前卡片数组.length < 卡片总数量 && 根据dx判断左滑到一定程度) {
		发起接口请求,请求更多卡片
	} else {
		正常展示卡片 || 提示用户没有更多了
	}
}

按照上面这个思路写出来的代码基本上就能把这两个问题都解决了

//这个transition是swiper组件中属性的一个,具体参考官方文档
transition(e) {
	//继续加载更多卡片的首要条件: 已经滑动到最后一个卡片
	if(parseInt(this.current) === this.showList.length - 1) {
		// 判断滑动的距离
    	if((e.detail.dx > 50 && e.detail.dx < 150) || (e.detail.dx > (this.showList.length - 1) * screenWidth)) {
        // 当仍有未被加载的卡片时发起请求
			if(this.showList.length < this.total) {
				this.$emit('swiperTransition', this.current + 1);
			} else {
				this.swiperShowStyle = this.current === this.total - 1 ? 'tp-swiper-tips-show' : 'tp-swiper-tips-hide';
			}
		}
	} 
}

不过,我觉得这个滑动切换应该是有更好的实现方法的,而且我想让“没有更多了”这个提示能够展示1s再消失,但是现在还没有办法能做到,如果各位大佬有什么意见帮助我改进这个功能,欢迎评论~ 本菜鸟在此谢过~文章来源地址https://www.toymoban.com/news/detail-425549.html

到了这里,关于【uni-app】swiper的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app 中 swiper 轮播图高度自适应

    方法一(好像只对第一张起作用) 1、首先 swiper 标签的宽度是 width: 100% 2、swiper 标签存在默认高度是 height: 150px ;高度无法实现由内容撑开,在默认情况下,图片的高度显示总是 150px swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度 swiper 高度 = swiper 宽度 * 原图高度 / 原图宽度 方法

    2024年02月09日
    浏览(55)
  • 【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

    目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 在常见titleNView配置代码示例中可以看到基本样式的代码

    2024年02月03日
    浏览(79)
  • uni-app 之 scroll-view和swiper

    uni-app 之 scroll-view和swiper swiper 轮播图 //indicator-dots=\\\"ture\\\"小圆点, //autoplay=\\\"ture\\\"自动轮播, //interval=\\\"1000\\\"跳转时间, //circular=\\\"ture\\\"是否采用衔接滑动,即播放到末尾后重新回到开头

    2024年02月09日
    浏览(48)
  • 解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题

    uniapp官方给出的解释就是小程序不支持本地图片,只支持网络访问或者base64。 当背景图片小于40kb的时候还好,uniapp会自动转为base64格式;但是大于40kb时候就不行了,目前我了解的有三种方式解决: 1.可以通过动态样式“:style”来解决,在标签上如下编写: 接着在data里声明

    2024年02月12日
    浏览(46)
  • uni-app开发使用uni-ui组件uni-data-checkbox编译微信小程序报错

    uniapp开发使用uni-ui控件uni-data-checkbox,编译成微信小程序报错VM50 WAService.js:1 TypeError: Cannot read property \\\'length\\\' of undefined,并且页面无法显示。  解决方法: 1、 HBuilder X 编译器下载 sass 或更新 HBuilder X 版本 2、更新uni-ui组件库 3、如果不使用uniCloud就注释uni-data-checkbox.vue文件中的

    2024年02月06日
    浏览(75)
  • uni-app开发 小程序直播功能

    1、微信后台申请插件开通 2、微信后台开通直播功能 3、代码中接入直播插件AppID 4、【直播组件】如何使用 5、直播组将状态获取 微信开发直播功能,需要企业账号; 需要申请直播功能和插件 1、微信后台申请插件开通 微信后台 登录微信后台 点击设置中的第三方设置 — 添

    2024年02月05日
    浏览(59)
  • uni-app开发小程序以及项目部署流程

    作者也是刚开始接触小程序开发,本次小程序开发使用的uni-app,记录下小程序的开发过程。         作者使用的开发工具:HBuilder x、微信开发者工具。         详细步骤可参考uni-app官网-快速上手,下面简述下作者的使用过程:         1.在HBuilder X 中打开如下路径文件 - 新

    2024年02月09日
    浏览(72)
  • uni-app开发小程序:项目架构以及经验分享

    2022年的时候,公司为了快速完成产品并上线,所以选用微信小程序为载体;由于后期还是打算开发App;虽然公司有ios和Android,但是如果能一套代码打包多端,一定程度上可以解决成本;前端技术栈也是vue,在考察选择了uni-app。后来多个小程序项目都采用了uni-app开发,积累了

    2024年02月09日
    浏览(83)
  • 小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

    一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后,项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件,使用组件 八、经过测试,成功。 参考链接 http://lihuaxi.xjx100.cn/new

    2024年02月12日
    浏览(58)
  • uni-app开发壁纸图像小程序 瀑布流、懒加载展示

    标题:使用uni-app开发壁纸图像小程序:瀑布流与懒加载展示 引言: 在今天的移动应用市场中,壁纸图像小程序备受欢迎。为了提高用户体验,我们可以使用uni-app框架来开发这样的小程序,并实现瀑布流和懒加载展示功能。本文将介绍如何使用uni-app框架来开发壁纸图像小程

    2024年02月15日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包