《slide》专题

Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features. Swiper Slider HTML Layout Swiper HTML layout is pretty simp

轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点。首先，Dom构造基本相同，如下： <div class="mui-slider"> <div class="mui-slider-group"> <!--第一个内容区容器--> <div class="mui-slider

描述 轮播组件，通过幻灯片的方式，在页面中横向展示内容组件。 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。 安装 $ npm install rax-slider --save 属性 属性 类型 默认值 必填 描述 支持 width string - 是 Slider 的宽度 height string - 是 Slider 的高度 autoPlay boolean false 否 是

简介 Slider 组件用于在一个页面中展示多个图片，在前端这种效果被称为轮播图。默认的轮播间隔为3秒。 子组件 支持任意类型的 Weex 组件作为其子组件。你也可以放置一个 indicator 组件用于显示轮播指示器。indicator 也只能作为 Slider 的子组件使用。indicator 不能再包含其它子组件了。 属性 auto-play, boolean. 组件渲染完成时，是否自动开始

!> 这个富交互体验组件依赖于 BindingX 特性，使用前请确定你的App 是否安装 Weex Binding 效果的 slider 组件 规则 用于丰富 slide，包括商品橱窗，图片列表等 假如子组件有点击事件，在 Android 由于 此约束，目前需要在子元素里面绑定对应事件，Weex Ui 提供了 wxc-pan-cell 包裹器来解决此情况，具体可参考 demo 支持滑到最右时候显示

!> 这个富交互体验组件依赖于 Weex BindingX 特性，使用前请确定你的App 是否安装 Weex 滑动选择组件 规则 用于选择线性取值范围中某个具体的值（整数），或者选取一个取值范围 Demo 使用方法 <template> <wxc-slider-bar v-bind="sliderBarCfg"></wxc-slider-bar> </template> <script>

Weex 导航滑动视窗增大组件 规则 上下滚动列表的时候，可以优雅地动画收起展开导航条，使得能展示更多的列表内容 <a href="http://127.0.0.1/a/">Demo 使用方法 <template> <div> <list ref="scroller" @scroll="onScroll" @touchstart="o

自动轮播 设置参数auto为true, 控件会在完成render后开始播放, 即开始轮播. 或者调用slider.play()/slider.stop()来开始/暂停播放 <div class="container"> <div id="slider-container-default"> <!-- 请注意，下边这个 stage 中不要出现空白字符，否则对效果有影响 -->

滑动弹框。支持四个触控区域，十二个动画方向。 Usage 全部引入 import { SlideModal } from 'beeshell'; 按需引入 import SlideModal from 'beeshell/dist/components/SlideModal'; Examples 基础 四个触控区域 main 区域是内容所在区域，带有遮罩，无法点击遮罩下面元素。 从 main

滑块组件。 Usage 全部引入 import { Slider } from 'beeshell'; 按需引入 import { Slider } from 'beeshell/dist/components/Slider'; Examples Code 详细 Code import { Slider } from 'beeshell'; <Slider range max={15

Slider 滑块 通过拖动滑块在一个固定区间内进行选择 基础用法 在拖动滑块时，显示当前值 通过设置绑定值自定义滑块的初始值 <template> <div class="block"> <span class="demonstration">默认</span> <el-slider v-model="value1"></el-slider> </div> <div

介绍 slide 为 BetterScroll 扩展了轮播焦点图的能力。 安装 npm install @better-scroll/slide --save // or yarn add @better-scroll/slide 使用 你需要首先引入 slide 插件，并通过静态方法 BScroll.use() 使用 import BScroll from '@better-scrol

定义 滑动条组件 图片展示 代码演示 import Slider from 'pile/dist/components/slider' const {SliderLine}= Slider 默认： 分段颜色展示： <SliderLine defaultValue={0} min={0} max={10} colorStageGroup={[4]} colorGroup={["#f44336"

定义 带展示当前数值的滑动条。 图片展示 代码演示 import Slider from 'pile/dist/components/slider' const {Sliders}= Slider 滑动 纯色： <Sliders upChangeBack={slidecb} defaultValue={4} min={0} max={10} titleBefore="自定义标题前 " titl

轮播图，提供了常见的轮播及 swipe 的功能，也是一个基于 better-scroll 进行封装的组件。 示例 基本使用 考虑到 cube-slide 最常用的场景，每个轮播页是一个可跳转链接的图片，所以我们提供的最简便的用法是，通过 data 属性传入一个包含图片和跳转链接信息的数组，我们会默认将其渲染成一组超链接图片的轮播图。 <cube-slide :data="items"/> exp