首页 > 其他分享 >uniapp swiper点击切换下一张

uniapp swiper点击切换下一张

时间:2023-05-11 23:33:37浏览次数:32  
标签:uniapp 100% 750rpx current 点击 include swiper size

  • 通过改变current,自动切换
<template>
	<view class="page">
		<swiper class="swiper" :vertical="true" :current="current" @tap="switchNext">
			<swiper-item>
				<view class="swiper-item">
					<image src="https://cdn.caomall.net/syzsj-play-1.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://cdn.caomall.net/syzsj-play-2.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://cdn.caomall.net/syzsj-play-3.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0
			};
		},
		onLoad(){
			
		},
		methods:{
			switchNext(){
				this.current = ++this.current;// 通过改变current,自动切换
			},
		}
	}
</script>

<style lang="scss">
page{
	height:100%;
}
.page{
	background-color: #F2F2F2;
	@include size(750rpx,100%);
	margin-left:-1rpx;
	overflow: hidden;
	.swiper {
		@include size(750rpx,100%);
		.swiper-item {
			@include size(750rpx,100%);
			display: block;
			position:relative;
			z-index:0;
			image{
				@include bgImage();
			}
		}
	}	
}
</style>

标签:uniapp,100%,750rpx,current,点击,include,swiper,size
From: https://www.cnblogs.com/pansidong/p/17392567.html

相关文章

  • 成品直播源码推荐,js点击让窗口抖动动画效果
    成品直播源码推荐,js点击让窗口抖动动画效果比如说用户的未输入密码就点击登录按钮,则输入框会晃动一下提示用户需要输入,实现这种效果很简单,只需要给元素添加一个类,然后做一个关键帧动画即可css代码 .shake{   animation:shake800msease-in-out; }@keyframesshake{......
  • uniapp跳转到一个原生的页面
    一、创建原生页面并配置1.创建原生页面Demo2.配置原生页面继承Activity二、在继承UniModule的类中写对应的页面跳转逻辑三、在uniapp中配置跳转的按钮四、将打包好的本地资源替换到项目中,打包运行1.本地资源打包2.替换掉AndroidStudio项目中的文件3.编译运行,点击进入小镜......
  • uniapp自定义开发一个文本输入框
    开发component中的一个input标签一、在原来的模块上面创建一个新的类TestComponent1.新建TestComponent2.配置json文件二、uniapp准备工作1.在uniapp中写一下刚刚创建的输入框2.打包导出资源3.资源替换复制刚刚生成的本地资源文件夹到AndroidStudio项目中......
  • 未配置appkey或配置错误,uniapp原生安卓插件开发
    开发安卓原生插件一、官方文档1.https://nativesupport.dcloud.net.cn/NativePlugin/course/android2.下载对应的SDK、工程文件二、生成uniapp的appkey1.配置配置好Androidstudio的环境:SDK、JDK2.导入项目3.HbuilderX中创建新的项目“plugin_demo”,同时当前创建项目的APP......
  • uniapp简单实现轮播图
    轮播图 <viewclass="price-content-style"> <viewclass="price-style"> ¥350.00 </view> <viewclass="content-style"> 【官方正品】全新Dior迪奥烈焰蓝金唇膏红色传奇新色丝绒992548 </view>......
  • 使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改
    **以下内容仅供自己学习使用话不多说,直接上代码1.首先去vuex里面importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);conststore=newVuex.Store({state:{headerColor:'default-header',//定义一个默认的颜色},mutations:{ //setHe......
  • 点击头像上传; post上传文件错误小记
    点击头像上传;post方式上传文件错误小记因为之前踩过这个坑所以记录一下,避免以后忘记1.上传报错的问题首先要实例化一个对象;总是会忘记这里的this指向监听元素节点;重点在于容易忘记this.files是一个数组;一定要取出来letfd=newFormData()letfile=this.fi......
  • 分段选择器(好用的第三方)---滑动选择对应不同的控制器页面--点击选择不同的控制器页面
    http://code.cocoachina.com/list/14/2http://code.cocoachina.com/view/129164用名字搜索比如说:LGSegments等~~~......
  • uniapp微信小程序,上传图片和表单数据一起提交
    弄表单上传,请求一直400错误,然后寻找其它方法uni.uploadFile({url:'http://localhost:6109/api/My/warrantyCard',//上传服务器的URLfilePath:this.ImgUrl,//本地图片的路径或临时文件路径......
  • 记录--前端实现点击选词功能
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助今天有一个需求,点击选中某个英文单词,然后对这个单词做一些处理,例如高亮背景、查看一些详细信息等等,今天简单实现了一下,效果如下:(支持移动端,chrome和sarafi浏览器均能正常使用。语言......