示例 前端使用技术:框架->vue 组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件 ly-tab 介绍地址 ly-tab npm地址 使用步骤 1,引入包,定义成公共组件 代码 import LyTab from '../packages/tab' Vue.use(LyTab) 2,页面调用,定义数据源,写事件 代码 //调用 <ly-tab v-model="selectedId" :items="policyListArr&q

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页

UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松

git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 better-scroll 的实现. 在线例子 起步 安装 npm i --save vue-sliding-button 引入 import Vue from 'vue' import SlidingButton from 'vue-sliding-button' Vue.use(SlidingButt

基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 可使用 babel-plugin -transform-remove-strict-mode 移除严格模式 可先进行$ n

最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导航栏滑动居中一样. 写出来挺有成就感的,做个记录.使用的框架是vue, 但思路无关框架. 首先看html的结构, <ul> <li class='active'>娱乐</li> <li>要闻</li> <li>体育</li>

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动: 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scro

Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div class="row"> <div class="col-sm-12"> <h3>My Components</h3> <todo-item :todos="todos01"></todo-item

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-header> <app-content></app-content> <app-footer></app-footer> </app> 的一个复合组件 1.js部分(component.js) (function () { Vue.component

使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-sel

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 需要什么? 在经过前面的四

项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定到点击的位置,却发现这个开源的代码没有实现这个方法.解决方法如下: 1.HorizontalListV

1.在使用UICollectionView 来显示横向滑动图片的时候,cell与cell之间有间隙,每次滑动后cell都会向左偏移,在使用过这两个方法才解决每次向左偏移的部分. 2.使用方法前不要开启分页效果,不然没有效果. collectionView.pagingEnabled = NO; - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)coll

起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定是无法直接实现3D滑动组件的,所以将功能拆分,如下步骤 实现一个双向循环链表,作为底层Item的数据结构 基于链表,实现一个无限循环的2D滑动组件 基于2D滑动组件做3D变化得到3D组件 兼容性检查以及功能封装,简化使用,确保稳定 双向循环链表的模拟 以前看到的轮播组件大多是用数组来作为底层数据结构

最近做的练手的小项目中存在一个横向滑动的问题,需要HorizontalScroll中嵌套GridView,但是GridView默认是竖直排放的item,况且HorizontalScroll与GridView都属于存在滚动条的控件,所以会有一些冲突问题,这里上网搜索了一下,发现了一个较为简单的解决办法,就是在java代码中动态的设置GridView的numColumns属性.每项Item的宽度和GridView的总宽度.将numColumns设置为与list集合的长度一致,下面贴出关键代码: in

ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置contentOffset也不管用 在ios7中controller有个 automaticallyAdjustsScrollViewInsets属性,默认为YES if (iOS7&&[self respondsToSelector:@selector(automaticallyAdjustsScrol

iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动.兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.你需要为iSlider先新建好数据: var data = [

在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布局选项卡:tab_button.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re

在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件组件来解决这些问题. 我们建议你参考 webpack-simple ,只要遵循指示,你就能很快的运行一个用到 .vue 组件 . 这是vue-cli的项目模板. npm install -g vue-cli vue init webpack-simple my-project cd my-proje

在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间,都能建立起关联,然后最后通过webpack打包编译就好 下面有两个组件a.vue和b.vue <h5>我是a组件</h5> <button @click="et">点我</button> <h2>{{number}}</h