功能 滑动切换时间,打点功能,支持月周切换日历组件    这是一款支持滑动切换以及周模式和月模式切换功能的日历组件,可以设置打卡信息,自定义样式. 组件样式使用了sass所有需要项目中先安装node-sass和sass-loader. 日历组件,组件名:zzx-calendar,代码块: zzxCalendar. 地址:https://ext.dcloud.net.cn/plugin?id=1732 代码 <template> <view class="content"

滑动日历效果 效果预览 实现要求:顶部固定悬浮的是获取未来一周的日期,分为上下两部分,上面部分显示星期,下面则显示具体日期.今天则显示今天,可点击头部具体日期,可向左向右滑动. 实现代码 顶部日历 页面部分的代码 <view wx:for="{{dayList}}" wx:for-index="index" class="tab-item {{currentSwiper==index ?'active':'noactive'}}" wx:k

在对于uni-app框架了解之后,今天就实现一个滚动切换tab效果,这个很常见的一个效果,最后封装成一个组件,便于以后使用,写这个需要引入uni官方提供的uni.css样式,用到了写好的样式,就不需要自己写了 这种切换无论是在app端还是小程序或者H5页面都是很常见的功能.对于这种功能,为单独封装成功组件,方便每个页面都能用到, tab顶部导航栏 页面布局,使用uni-app提供的scroll-view组件. <template> <view class="uni-tab-ba

<view class="topWrapper" v-show="chooseShow" @click="chooseShow = false" @touchmove.stop = ""> <view class="topframe" @click.stop=""> <view>综合排序</view> <view>销量最高<

先上图:    说明:这是基于移动端的,对于PC端浏览器支持不是很好(我测的结果是IE无效),另外这个swiper是4.x版本的 思路: 先引用css <link href="css/bootstrap.min.css" rel="stylesheet" /> <!--这是字体图标文件--> <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel=&q

按照惯例,先上效果图 vue 版本同款日历:https://github.com/TangSY/vue-hash-calendar react-hash-calendar 支持手势滑动操作 上下滑动 切换 周/月 模式 [周模式中] 左右滑动可切换 上一周/下一周 [月模式中] 左右滑动可切换 上一月/下一月 安装使用说明 npm i react-hash-calendar Demo 或者请用浏览器的手机模式查看:https://www.hxkj.vip/demo/react-calendar/

在大家的催更下,鸽了一天又一天,vue3-hash-calendar 终于在今天诞生了. 按照惯例,先上效果图 Demo 扫描上方二维码或者请用浏览器的手机模式查看:https://www.hxkj.vip/demo/calendar/ 觉得好用可以给一个 star 哦~~ 仓库地址 github:https://github.com/TangSY/vue3-hash-calendar 码云 gitee:https://gitee.com/HashTang/vue3-hash-calendar

公司项目需要日历这个功能,经过查阅资料写了个demo,包含公历,农历,节假日等,还可左右滑动. 效果图: 代码: public class MainActivity extends AppCompatActivity implements CalendarViewPagerFragment.OnPageChangeListener, CalendarViewFragment.OnDateClickListener, CalendarViewFragment.OnDateCancelListene

一.js的滑屏 1)以下脚本实现js滑屏scroll="document.documentElement.scrollTop=800"#垂直滚动 pxscroll = "document.documentElement.scrollLeft=1000"#水平滚动scroll="window.scrollTo(100,500)"#滚动到指定坐标scroll="window.scrollBy(0,100)"#滑动到相对坐标scro

在开发用户模块的时候,相信大家都碰到过一个功能,图片滑动解锁后发送验证码,这里分享我用uni-app制作的一个小控件 效果如下: 需要如下图片资源 template <template> <view class="zhezhao" v-if="shows" @tap="shows=false"> <view class="verifyBox" @touchend="onEnd"

基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive. uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目.支持全屏丝滑般上下滑动切换小视频,迷你时间进度条,Nvue解决视频层级显示,可编译兼容H5+小程序+APP端. ◆ 一览效果 编译至 [小程序+H5+App端] 效果如下 ◆ 运用技术 编辑器:HbuilderX 3.1.21 框架技术:Uniapp+Vue.js+Nvue+Vuex UI组件库:uView-ui^

swiper.js,hammer.js,mobiscroll http://www.mobiscroll.com/       日历

首先给页面添加 touch 事件 <view class="text-area" @touchstart="start" @touchend="end"> </view> 然后定义一个合理区间进行判断,用户当前是上下滑动看书还是左右滑动变换章节. start(e){ ].clientX; ].clientY; }, end(e){ // console.log(e) ].clientX-this.startData.cli

<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend"> </view> data() { return { flag: 0, text: '', lastX: 0, lastY: 0 } } methods: { handletouchmo

说明:本案例的样式基于colorui组件库 感兴趣的小伙伴可以看下教程 colorui组件库开发文档或者csdn的文档,顺便再分享下 colorui的群资源 最近项目中需要用到滑动切换的效果,自己懒得写就去网上找了下,发现网上的也不靠谱,不是样式错乱就是其他bug,反正到你的电脑上就是各种bug般的存在,刚好趁着过年的时间把这个完整的效果给小伙伴们陈列下我的gitee 效果图 组件封装 swiper-tab.vue html <template> <view class="&q

注意事项(做好以下几点就很难出问题): 一.scroll-view组件必须有固定高度,不可出现高度坍塌或让高度消失等现象;(重中之重) 二.一般问题出的多的就是在nvue环境下去使用的scroll-view组件,在任何端如果出现滑动不了的现象都请给scroll-view组件加上样式flex-direction:row;因为在nvue环境下每个元素都是默认使用flex布局的他的flex-direction属性都是默认为column(纵向排列),这个影响因素也是博主自己做项目时偶然发现的. 三.使用

移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前移动的方向 具体实现: 1.获取开始和结束坐标 1 /* 移动开始 */ 2 handletouchstart(event) { 3 //event.changedTouches[0].clientX; 移动的x轴坐标 4 //lastY = event.changedTouches[0].clie

<view @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend"> </view> data() { return { flag: 0,//1向左滑动,2向右滑动,3向上滑动 4向下滑动 text: '',//向哪里滑动 lastX: 0, lastY: 0, index:0 } } methods: {

效果图: tab栏可以滑动,切换页面跟随tab栏同步滑动.这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度. 下面是代码 html <template> <view> <scroll-view class="scroll1" scroll-x="true"> <view :class="currentTab==index ? 'select' : ''&

一.写在前面 自使用android studio开始,就被它独特的依赖方式:compile 'com.android.support:appcompat-v7:25.0.1'所深深吸引,自从有了它,麻麻再也不用担心依赖第三方jar包繁琐无趣啦.而,如果自己写一个开源库是一种怎样的体验,此乃利(装)国(逼)利(神)民(器)呀! 而一路装逼不易,你会发现如果你要发布你的开源库到官方的Bintray/Jcenter并非易事,所以先去网上一探究竟,简单的,难的,五花八门,全(误)面(人)具(子)备(弟)