uni-app 上下滑动左右滑动

<template><view><view class="uni-padding-wrap uni-common-mt"><view class="uni-title uni-common-mt">Vertical Scroll<text>\n纵向滚动</text></view><view><scroll-view:scroll-top="scrollTop"scroll-y="true"class="scroll-Y"@scrolltoupper="upper"@scrolltolower="lower"@scroll="scroll"><view id="demo1" class="scroll-view-item uni-bg-red">A</view><view id="demo2" class="scroll-view-item uni-bg-green">B</view><view id="demo3" class="scroll-view-item uni-bg-blue">C</view></scroll-view></view><view @tap="goTop" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view><view class="uni-title uni-common-mt">Horizontal Scroll<text>\n横向滚动</text></view><view><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120"><view id="demo1" class="scroll-view-item_H uni-bg-red">A</view><view id="demo2" class="scroll-view-item_H uni-bg-green">B</view><view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view></scroll-view></view></view></view>
</template><script>
export default {data() {return {scrollTop: 0,old: {scrollTop: 0}};},methods: {upper: function(e) {console.log(e);},lower: function(e) {console.log(e);},scroll: function(e) {console.log(e);this.old.scrollTop = e.detail.scrollTop;},goTop: function(e) {this.scrollTop = this.old.scrollTop;this.$nextTick(function() {this.scrollTop = 0;});uni.showToast({icon: "none",title: "纵向滚动 scrollTop 值已被修改为 0"});}}
};
</script><style lang="less">
// 上下滑动
.scroll-Y {height: 300rpx;.scroll-view-item {height: 300rpx;width: 100%;}
}
// 左右滑动
.scroll-view_H {height: 400rpx;width: 100%;white-space: nowrap; // 滚动必须加的属性border: 1px #007aff solid;.scroll-view-item_H {height: 300rpx;width: 40%;margin-right: 20rpx;display: inline-block;vertical-align: top;}
}
</style>

参见：uni-app 官网

uni-app 上下滑动左右滑动相关推荐

uniapp app手机端视频滑动
需求要求:app端视频播放可以滑动,记录观看时间分析:采用swiper中内嵌video方法遇到的坑 1.直接使用vue页面在APP端不显示,解决:swiper内嵌视频需要使用nvue ,视频需要使 ...
一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下: http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想 ...
Android 向右滑动销毁（finish）Activity, 随着手势的滑动而滑动的效果
转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/20934541),请尊重他人的辛勤劳动成果,谢谢! 今天给大 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
jquery监听向上向下滑动，滑动执行操作
jquery监听向上向下滑动,滑动执行操作 // 滚动之前 var beforeScrollTop = $(window).scrollTop(); $(window).on("scroll ...
android activity滑动切换,Android 向右滑动切换Activity, 随着手势的滑动而滑动的效果...
[实例简介] Android 向右滑动切换Activity, 随着手势的滑动而滑动的效果,项目详情http://blog.csdn.net/xiaanming/article/details/2093 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

uni-app 上下滑动左右滑动

uni-app 上下滑动左右滑动相关推荐

最新文章

热门文章