app左右滑动滑块组件

效果图

代码实例

 <div  class="yn-hd-main"><hy-swipe><div class = "swipe-container"><div class="swipe-wrapper" ><div class="hy-swipe-left  xzq-hd-bg " ><div  class="yn-hd-main-y yn-bold" >上月用电量</div><div class="yn-hd-main-e40"></div><div class="yn-hd-main-e"><div class="yn-hd-main-e-e">万kWh</div><div class="yn-hd-main-e-y yn-bold yn-shadow" ng-bind-html="sydl | trustHtml"></div></div><div class="yn-hd-main-e40"></div><div class="yn-hd-main-s"><div class="yn-hd-main-s-l"></div><div class="yn-hd-main-s-r"><div  class="yn-hd-main-s-r-y" ></div><div  class="yn-hd-main-s-r-e" >&nbsp;行业内排名<span class="yn-hd-main-s-r-e-span yn-bold yn-shadow">&nbsp;{{userInforss.sydlpm?(userInforss.sydlpm|number:0):"--"}}&nbsp;</span><span class="yn-hd-main-s-r-e-span-s">th/{{userInforss.sydlzm?(userInforss.sydlzm|number:0):'--'}}</span></div><div></div></div></div></div><div class="hy-swipe-center xzq-hd-bg" ><div  class="yn-hd-main-y yn-bold" >上月基本电费</div><div class="yn-hd-main-e"><div class="yn-hd-main-e-e-e">元</div><div class="yn-hd-main-e-y-e yn-bold yn-shadow" ng-bind-html="jbfy | trustHtml"></div></div><div class="yn-hd-main-e40"><div class="yn-hd-main-e-e-e40">元</div><div class="yn-hd-main-e-y-e40 yn-bold yn-shadow" ng-bind-html="jbfydd | trustHtml"></div><div class="yn-hd-main-e-y-e400 yn-bold">度电基本电费</div></div><div class="yn-hd-main-e40"><div class="yn-hd-main-e-e-e40">%</div><div class="yn-hd-main-e-y-e40 yn-bold yn-shadow" ng-bind-html="jbfyzb | trustHtml"></div><div class="yn-hd-main-e-y-e400 yn-bold">基本电费占比</div></div><div class="yn-hd-main-s"><div class="yn-hd-main-s-l-dj"></div><div class="yn-hd-main-s-r"><div  class="yn-hd-main-s-r-y" ></div><div  class="yn-hd-main-s-r-e" >&nbsp;行业内排名 <span class="yn-hd-main-s-r-e-span yn-bold yn-shadow">&nbsp;{{userInforss.jbdfpm?(userInforss.jbdfpm|number:0):"--"}}&nbsp;</span><span class="">th/{{userInforss.sydlzm?(userInforss.sydlzm| number:0) :"--"}}</span></div></div></div></div><div class="hy-swipe-right xzq-hd-bg" ><div  class="yn-hd-main-y yn-bold" >上月力调电费</div><div class="yn-hd-main-e"><div class="yn-hd-main-e-e-e">元</div><div class="yn-hd-main-e-y-e yn-bold yn-shadow" ng-bind-html="ltfy| trustHtml"></div></div><div class="yn-hd-main-e40"><div class="yn-hd-main-e-e-e40">元</div><div class="yn-hd-main-e-y-e40 yn-bold yn-shadow" ng-bind-html="ltfydd | trustHtml"></div><div class="yn-hd-main-e-y-e400 yn-bold">度电力调电费</div></div><div class="yn-hd-main-e40"><div class="yn-hd-main-e-e-e40">%</div><div class="yn-hd-main-e-y-e40 yn-bold yn-shadow" ng-bind-html="ltfyzb | trustHtml"></div><div class="yn-hd-main-e-y-e400 yn-bold">力调电费占比</div></div><div class="yn-hd-main-s"><div class="yn-hd-main-s-l-dj"></div><div class="yn-hd-main-s-r"><div  class="yn-hd-main-s-r-y" ></div><div  class="yn-hd-main-s-r-e" >&nbsp;行业内排名 <span class="yn-hd-main-s-r-e-span yn-bold yn-shadow">&nbsp;{{userInforss.ltdfpm?(userInforss.ltdfpm|number:0):"--"}}&nbsp;</span><span class="">th/{{userInforss.sydlzm?(userInforss.sydlzm | number:0) :"--"}}</span></div></div></div></div></div></div></hy-swipe></div>


.yn-hd-main{overflow: hidden;width: 100vw;padding-top:2.67vw;height:calc(420 / 750 * 100vw);position: relative;background-color: #EEEEEE;
}.swipe-container {width: 100%;height: 100%;overflow: hidden;position: relative;
}.swipe-container .swipe-wrapper {width: 100%;height: 100%;position: relative;transition: 300ms;-webkit-transition: 300ms;
}.swipe-container .swipe-wrapper .hy-swipe-left {height: 100%;width: calc(100% - 4rem);position: absolute;top: 0;left: 0;z-index: 100;-webkit-box-orient: vertical;flex-direction: column;text-align: center;border: none;border-radius: 1rem;margin-left: 1rem;-moz-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.87) inset; /* For Firefox3.6+ */-webkit-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.86) inset; /* For Chrome5+, Safari5+ */box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.83) inset; /* For Latest Opera */
}.swipe-container .swipe-wrapper .hy-swipe-center {height: 100%;width: calc(100% - 4rem);position: absolute;top: 0;left: 0;transform: translateX(0%);-webkit-box-orient: vertical;flex-direction: column;border: none;border-radius: 1rem;margin-left: 2rem;-moz-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.87) inset; /* For Firefox3.6+ */-webkit-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.86) inset; /* For Chrome5+, Safari5+ */box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.83) inset; /* For Latest Opera */
}.swipe-container .swipe-wrapper .hy-swipe-right {height: 100%;width: calc(100% - 4rem);position: absolute;top: 0;left: 0;z-index: 1000;border: none;border-radius: 1rem;/*display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;*/-webkit-box-orient: vertical;text-align: center;margin-left: 3rem;-moz-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.87) inset; /* For Firefox3.6+ */-webkit-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.86) inset; /* For Chrome5+, Safari5+ */box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.83) inset; /* For Latest Opera */
}.swipe-wrapper .xzq-hd-bg:nth-child(1)  { background: #ffffff url('../../../img/ynhome/cards-bg.png') top no-repeat; background-size: 100% 100%;  opacity: 0.8;}.swipe-wrapper .xzq-hd-bg:nth-child(2) { background: #ffffff url('../../../img/ynhome/cards-bg.png') top no-repeat; background-size: 100% 100%;  opacity: 0.8;}.swipe-wrapper .xzq-hd-bg:nth-child(3) { background: #ffffff url('../../../img/ynhome/cards-bg.png') top no-repeat; background-size: 100% 100%;  opacity: 0.8;}.swipe-container .swipe-wrapper .hy-swipe-0 {height: 100%;width: calc(100% - 4rem);position: absolute;top: 0;left: 0;z-index: 100;-webkit-box-orient: vertical;flex-direction: column;text-align: center;border: none;border-radius: 1rem;margin-left: 1rem;-moz-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.87) inset; /* For Firefox3.6+ */-webkit-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.86) inset; /* For Chrome5+, Safari5+ */box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.83) inset; /* For Latest Opera */
}.swipe-container .swipe-wrapper .hy-swipe-1 {height: 100%;width: calc(100% - 4rem);position: absolute;top: 0;left: 0;transform: translateX(0%);-webkit-box-orient: vertical;flex-direction: column;border: none;border-radius: 1rem;margin-left: 1.5rem;-moz-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.87) inset; /* For Firefox3.6+ */-webkit-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.86) inset; /* For Chrome5+, Safari5+ */box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.83) inset; /* For Latest Opera */
}
.swipe-container .swipe-wrapper .hy-swipe-2 {height: 100%;width: calc(100% - 4rem);position: absolute;top: 0;left: 0;/*transform: translateX(0%);*/-webkit-box-orient: vertical;flex-direction: column;border: none;border-radius: 1rem;margin-left: 2rem;-moz-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.87) inset; /* For Firefox3.6+ */-webkit-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.86) inset; /* For Chrome5+, Safari5+ */box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.83) inset; /* For Latest Opera */
}.swipe-container .swipe-wrapper .hy-swipe-3 {height: 100%;width: calc(100% - 4rem);position: absolute;top: 0;left: 0;z-index: 1000;border: none;border-radius: 1rem;/*display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;*/-webkit-box-orient: vertical;text-align: center;margin-left: 2.5rem;-moz-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.87) inset; /* For Firefox3.6+ */-webkit-box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.86) inset; /* For Chrome5+, Safari5+ */box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.83) inset; /* For Latest Opera */
}
.swipe-wrapper .xzq-hd-bg1:nth-child(1)  { background: #ffffff url('../../../img/ynhome/cards-bg.png') top no-repeat; background-size: 100% 100%;  opacity: 0.8;}
.swipe-wrapper .xzq-hd-bg1:nth-child(2) { background: #ffffff url('../../../img/ynhome/cards-bg.png') top no-repeat; background-size: 100% 100%;  opacity: 0.8;}
.swipe-wrapper .xzq-hd-bg1:nth-child(3) { background: #ffffff url('../../../img/ynhome/cards-bg.png') top no-repeat; background-size: 100% 100%;  opacity: 0.8;}
.swipe-wrapper .xzq-hd-bg1:nth-child(4) { background: #ffffff url('../../../img/ynhome/cards-bg.png') top no-repeat; background-size: 100% 100%;  opacity: 0.8;}

/*** Created by zyf on 2018/12/21.*/
(function(){"use strict";var module = null;try {module = angular.module('haiyiMobile');} catch (err) {module = angular.module('haiyiMobile', ['onsen']);}module.factory('SwipeViewMore',['$onsen','$hyUtil',function($onsen,$hyUtil){var SwipeViewMore = Class.extend({init: function(scope, element, attrs) {this._scope = scope;this._element = element;this._attrs = attrs;this._$hyUtil = $hyUtil;this._swipeWrapper = angular.element(element[0].querySelector('.swipe-wrapper'));this._swipeCenter = angular.element(element[0].querySelector('.hy-swipe-1'));this._swipeCenterWidth = this._swipeCenter[0].offsetWidth;this._curSwipeNo = 1;//初始化第一个this._addEventListener();},_addEventListener:function(){var allowItemClick = true;//state = 1;//0:向右滑动    1：没有滑动   2：向左滑动//showState = 11; //10:左侧显示    11：中间显示   12：右侧显示var isTouched, isMoved, touchStartX, touchStartY, touchCurrentX, touchCurrentY,touchStartTime, touchEndTime, wrapperWidth, wrapperHeight, percentage,touchesDiff, isScrolling, state = 1, showState = 11;this._swipeWrapper.on(this._$hyUtil.gettouchEvent().start,angular.bind(this,handleTouchStart));this._swipeWrapper.on(this._$hyUtil.gettouchEvent().move, angular.bind(this,handleTouchMove));this._swipeWrapper.on(this._$hyUtil.gettouchEvent().end, angular.bind(this,handleTouchEnd));//鼠标按下或者手指按下function handleTouchStart(e) {isTouched = true;touchStartX = touchCurrentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;touchStartY = touchCurrentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;touchStartTime = (new Date()).getTime();allowItemClick = true;isScrolling = undefined;};//开始移动function handleTouchMove(e) {if (!isTouched) return;touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;if (typeof isScrolling === 'undefined') {isScrolling = !!(isScrolling || Math.abs(touchCurrentY - touchStartY) > Math.abs(touchCurrentX - touchStartX));}if (isScrolling) {isTouched = false;return;}e.preventDefault();allowItemClick = false;if (!isMoved) {//第一次移动isMoved = true;wrapperWidth = this._swipeWrapper[0].offsetWidth;wrapperHeight = this._swipeWrapper[0].offsetHeight;this._swipeWrapper.css('transition', "0ms");this._swipeWrapper.css('webkitTransition', "0ms");}e.preventDefault();touchesDiff = touchCurrentX - touchStartX;var _curSwipeName = '.hy-swipe-'+this._curSwipeNo;var _curSwipe = this._element[0].querySelector(_curSwipeName);var _curSwipeWidth = _curSwipe ? _curSwipe.offsetWidth : 0;if(touchesDiff > 0){//向右滑if(this._curSwipeNo<1){}else if(this._curSwipeNo==1){this._swipeWrapper.css('transform', 'translateX('+ touchesDiff  + 'px)');this._swipeWrapper.css('webkitTransform', 'translateX( '+ touchesDiff + 'px)');}else{this._swipeWrapper.css('transform', 'translateX(-' + ((_curSwipeWidth * (this._curSwipeNo-1)) -touchesDiff)+ 'px)');this._swipeWrapper.css('webkitTransform', 'translateX(-' + ((_curSwipeWidth * (this._curSwipeNo-1)) - touchesDiff )+ 'px)');}}else if(touchesDiff < 0){//向左滑if(this._curSwipeNo>=(this._scope.swipnum - 1)){}else if(this._curSwipeNo<1){this._swipeWrapper.css('transform', 'translateX('+ (_curSwipeWidth + touchesDiff)  + 'px)');this._swipeWrapper.css('webkitTransform', 'translateX( '+ (_curSwipeWidth + touchesDiff) + 'px)');}else if(this._curSwipeNo==1){this._swipeWrapper.css('transform', 'translateX('+ (touchesDiff)  + 'px)');this._swipeWrapper.css('webkitTransform', 'translateX( '+ (touchesDiff) + 'px)');}else{this._swipeWrapper.css('transform', 'translateX(-' + ((_curSwipeWidth * (this._curSwipeNo-1)) -touchesDiff)+ 'px)');this._swipeWrapper.css('webkitTransform', 'translateX(-' + ((_curSwipeWidth * (this._curSwipeNo-1)) - touchesDiff )+ 'px)');}}};//移动结束function handleTouchEnd(e) {var _curSwipeName = '.hy-swipe-'+this._curSwipeNo;var _curSwipe = this._element[0].querySelector(_curSwipeName);var _curSwipeWidth = _curSwipe ? _curSwipe.offsetWidth : 0;if(touchesDiff>0){state = 0;//向右滑动percentage = (touchesDiff > _curSwipeWidth ? _curSwipeWidth :touchesDiff) / _curSwipeWidth;if( percentage > 0.2){this._curSwipeNo = this._curSwipeNo - 1if(this._curSwipeNo< 0){this._curSwipeNo = 0;}}}else if(touchesDiff == 0){state = 1;//没有滑动}else if(touchesDiff < 0){state = 2;//向左滑动percentage = ((-touchesDiff) > _curSwipeWidth ? _curSwipeWidth : (-touchesDiff))/ _curSwipeWidth;if( percentage > 0.2) {this._curSwipeNo = this._curSwipeNo + 1;if (this._curSwipeNo > this._scope.swipnum - 1) {this._curSwipeNo = this._scope.swipnum - 1;}}}if (!isTouched || !isMoved) {isTouched = isMoved = false;return;}isTouched = isMoved = false;this._swipeWrapper.css('transition', "100ms");this._swipeWrapper.css('webkitTransition', "100ms");touchEndTime = new Date().getTime();//if(state === 0){  //向右滑动if(this._curSwipeNo<1){this._swipeWrapper.css('transform', 'translateX(' + (_curSwipeWidth ) + 'px)');this._swipeWrapper.css('webkitTransform', 'translateX(' + (_curSwipeWidth) + 'px)');}else if(this._curSwipeNo==1){this._swipeWrapper.css('transform', 'translateX('  + '0px)');this._swipeWrapper.css('webkitTransform', 'translateX( ' + '0px)');}else{this._swipeWrapper.css('transform', 'translateX(-' + (_curSwipeWidth * (this._curSwipeNo-1)) + 'px)');this._swipeWrapper.css('webkitTransform', 'translateX(-' + (_curSwipeWidth * (this._curSwipeNo-1)) + 'px)');}//}else if(state === 2){   //向左滑动//    if(this._curSwipeNo<1){//        this._swipeWrapper.css('transform', 'translateX(' + (_curSwipeWidth * (-1)) + 'px)');//        this._swipeWrapper.css('webkitTransform', 'translateX(' + (_curSwipeWidth * (-1)) + 'px)');//    }else if(this._curSwipeNo==1){//        this._swipeWrapper.css('transform', 'translateX('  + '0px)');//        this._swipeWrapper.css('webkitTransform', 'translateX( ' + '0px)');//    }else{//        this._swipeWrapper.css('transform', 'translateX(' + (_curSwipeWidth * (this._curSwipeNo-2)) + 'px)');//        this._swipeWrapper.css('webkitTransform', 'translateX(' + (_curSwipeWidth * (this._curSwipeNo-2)) + 'px)');//    }//}setTimeout(function () {allowItemClick = true;}, 100);}显示中间部分//function showCenter(self){//    self._swipeWrapper.css('transform', 'translateX(' + (0) + 'px)');//    self._swipeWrapper.css('webkitTransform', 'translateX(' + (0) + 'px)');//    showState = 11;//};//显示右边部分//function showRight(self){//    self._swipeWrapper.css('transform', 'translateX(' + (-self._swipeRightWidth) + 'px)');//    self._swipeWrapper.css('webkitTransform', 'translateX(' + (-self._swipeRightWidth) + 'px)');//    showState = 12;//};//显示左边部分//function showLeft(self){//    self._swipeWrapper.css('transform', 'translateX(' + (self._swipeLeftWidth) + 'px)');//    self._swipeWrapper.css('webkitTransform', 'translateX(' + (self._swipeLeftWidth) + 'px)');//    showState = 10;//};},});MicroEvent.mixin(SwipeViewMore);return SwipeViewMore;}]);module.directive('hySwipeMore',['$onsen','SwipeViewMore',function($onsen,SwipeViewMore){return {restrict:'E',scope : {swipnum : "@swipnum",},compile:function(element,attrs){return{pre:function(scope,element,attrs) {var swipe = new SwipeViewMore(scope, element, attrs);$onsen.declareVarAttribute(attrs, swipe);element.data('hy-swipe-more', swipe);scope.$on('$destroy', function() {swipe._events = undefined;$onsen.removeModifierMethods(swipe);element.data('hy-swipe', undefined);element = null;});var _temp = parseInt(scope.swipnum);//选择第2个作为展示页var center = element[0].querySelector('.hy-swipe-1');var centerWidth = center.offsetWidth;for (var i=0;i<_temp;i++){var curSwipeNo = '.hy-swipe-'+i;var curSwipe = element[0].querySelector(curSwipeNo);if(i<1){var leftWidth = curSwipe ? curSwipe.offsetWidth : 0;angular.element(curSwipe).css('transform','translateX('+ (0 - leftWidth*(i+1))+ 'px)');angular.element(curSwipe).css('webkitTransform','translateX('+ (0 - leftWidth*(i+1))+ 'px)');}else if(i>1){var rightWidth = curSwipe ? curSwipe.offsetWidth : 0;angular.element(curSwipe).css('transform','translateX('+ (rightWidth)*(i-1)+ 'px)');angular.element(curSwipe).css('webkitTransform','translateX('+ (centerWidth)*(i-1)+ 'px)');}}},post:function(scope,element,attrs){},}}};}]);
})();

app左右滑动滑块组件相关推荐

前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
python中scale的用法_Tkinter Scale滑块组件的用法
Tkinter 库中,支持通过滑动滑块(Scale)来设置属性值,最常见的就是设定音量,如图 1 所示便是MAC上的音量调节滑块: 图 1 MAC上的音量控制器图 2 所示便是 Windows 上的 ...
【Vue3】滑动验证组件 | 滑动验证
前言滑块验证不只判断是否滑动到尾部,真正的目的是检测用户行为,检测行为是人为.脚本.还是其它. 防止使用脚本大量注册.请求等 .比如发送请求时,判断用户在某个页面停留了多长时间.登录.注册时是否点击 ...
第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
vue3.2+ 滑动验证组件，pc/手机通用，即插即用
vue3.2+ 滑动验证组件,pc/手机通用,即插即用一.前言二.成果展示三.组件使用四.vue3.2+ 滑动验证组件源码五.最后,点个赞一.前言 vue已经更新到3.2+,使用了scr ...
【Vue实用功能】vue滑块组件验证
vue滑块验证,图片验证,图片旋转验证,滑动验证完整demo:https://download.csdn.net/download/weixin_44590591/85224724 注:Vue3均使 ...
15、Java Swing JSlider：滑块组件
在前面的章节中,我们介绍了 Swing 设计简单界面所需的窗口.布局组件以及如何响应事件. Swing 还提供了很多高级组件,如菜单栏.工具栏.文件选择器.表格以及树等.使用这些高级组件可以实现更为复 ...
滑块组件_组件制作：如何使用链接的输入创建滑块
滑块组件 by Robin Sandborg 罗宾·桑德伯格(Robin Sandborg) 组件制作:如何使用链接的输入创建滑块 (Component crafting: how to creat ...
IOS 开发 UIProgress 和 UISlidre 进度条和滑动条组件
进度条和滑动条组件非常常见,在ios中进度条组件是无法响应事件的.滑动条可响应事件.但是这两个组件均不可设置高度,可设置x,y,width 进度条属性名称类型说明默认值 progressVie ...

app左右滑动滑块组件

app左右滑动滑块组件

app左右滑动滑块组件相关推荐

最新文章

热门文章