vux 实现多栏滚动
1.PopupPicker 组件
<!-- vux-ui -->
<template>
<div>
<!-- 标题栏 -->
<x-header title="vux-ui"></x-header>
<!-- 内容部分 -->
<group>
<x-input :placeholder="'标题'"></x-input>
<x-textarea :value="content" :max="200" name="description" :placeholder="'提示'"></x-textarea>
</group>
<!-- 两栏滚动 -->
<divider>两栏滚动</divider>
<popup-picker :title="title2" :data="list2" :columns="2" v-model="value2" @on-change="onChangeValue2" show-name></popup-picker>
<!-- 三栏滚动 -->
<divider>三栏滚动</divider>
<popup-picker :title="title3" :data="list3" :columns="3" v-model="value3" @on-change="onChangeValue3" show-name></popup-picker>
</div>
</template> <script>
import { XHeader, Group, XInput, XTextarea, Divider, PopupPicker } from 'vux' export default {
name: 'VuxUI',
components: {
XHeader,
Group,
XInput,
XTextarea,
Divider,
PopupPicker,
},
data(){
return {
content:'使用vux,需要配置webpack.base.conf.js文件',
// 两栏滚动
title2: '联动显示文字',
list2: [{
name: '中国',
value: 'china',
parent: 0
}, {
name: '美国',
value: 'USA',
parent: 0
}, {
name: '广东',
value: 'china001',
parent: 'china'
}, {
name: '广西',
value: 'china002',
parent: 'china'
}, {
name: '美国001',
value: 'usa001',
parent: 'USA'
}, {
name: '美国002',
value: 'usa002',
parent: 'USA'
}],
value2: [],
// 三栏滚动
title3: '联动显示文字',
list3: [{
name: '中国',
value: 'china',
parent: 0
}, {
name: '美国',
value: 'USA',
parent: 0
}, {
name: '广东',
value: 'china001',
parent: 'china'
}, {
name: '广西',
value: 'china002',
parent: 'china'
}, {
name: '美国001',
value: 'usa001',
parent: 'USA'
}, {
name: '美国002',
value: 'usa002',
parent: 'USA'
}, {
name: '广州',
value: 'gz',
parent: 'china001'
}, {
name: '深圳',
value: 'sz',
parent: 'china001'
}, {
name: '广西001',
value: 'gx001',
parent: 'china002'
}, {
name: '广西002',
value: 'gx002',
parent: 'china002'
}, {
name: '美国001_001',
value: '0003',
parent: 'usa001'
}, {
name: '美国001_002',
value: '0004',
parent: 'usa001'
}, {
name: '美国002_001',
value: '0005',
parent: 'usa002'
}, {
name: '美国002_002',
value: '0006',
parent: 'usa002'
}],
value3: []
}
},
methods: {
onChangeValue2(val){
console.log(val);
},
onChangeValue3(val){
console.log(val);
}
}
}
</script> <style lang="less" scoped>
//
</style>
2.效果图
.
vux 实现多栏滚动的更多相关文章
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- html5 固定边栏滚动特效
<script src="https://code.jquery.com/jquery.js"></script> //引入jquery <scrip ...
- jquery版固定边栏滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 类似网易新闻 title栏 滚动时 文字放大&变色
http://files.cnblogs.com/files/n1ckyxu/ScrollTitleView.zip
- Div 滚动栏滚动到指定的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vux 使用swiper 垂直滚动文字 报错[Intervention] Ignored...
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus ...
- vux picker
1.通过实验证明: PopupPicker = TransferDom + Popup + PopupHeader + Picker 2.代码 Picker.vue <!-- Picker 组件 ...
- client , offset , scroll 系列 及百度导航栏案例
1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- Spring启动执行流程梳理
注:本文梳理启动流程使用的Spring版本:4.0.2.RELEASE 使用spring配置,都需要在web.xml中配置一个spring的监听器和启动参数(context-param),如下: &l ...
- CAD参数绘制圆(com接口)
CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以设置圆的圆心位置及半径属性. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下: 参数 说明 DOUBL ...
- vue-router 基本使用(vue工程化)
(1)概念: 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => h ...
- flask中模板日期格式控制和jinja2中模板格式控制
1.flask的模块语言采用的是jinja2,首先说一下jinja2中的模板格式控制的使用,即模板自定义filters的使用. python的脚本如下(采用的是格式显示日期): 1 from jinj ...
- What is state and props
State, in React component, is internal dataset which affects the rendering of the component. To some ...
- iOS工具】rvm、Ruby环境和CocoaPods安装使用及相关报错问题解决
〇.前言 <p>在iOS开发中 CocoaPods作为库依赖管理工具就是一把利器. 有了 CocoaPods则无需再通过拖 第三方库及第三方库所依赖的 framework静态库到项目中等麻 ...
- redis简介以及安装
redis作为开源的高性能的键值对数据库,本身是单线程的,性能虽然没有memcache高,但是也是性能跟memcache相差无几的,memcache是多线程的,但是redis本身功能更加强大,学习一下 ...
- C++如何显式调用常成员函数
C++的常成员函数与同名成员函数重载时,该如何显式调用常成员函数? 具体的一个小例子: #include <iostream> using namespace std; class C1 ...
- CSU1019: Simple Line Editor
1019: Simple Line Editor Submit Page Summary Time Limit: 1 Sec Memory Limit: 128 Mb Subm ...
- [Python3网络爬虫开发实战] 3.1.2-处理异常
前一节我们了解了请求的发送过程,但是在网络不好的情况下,如果出现了异常,该怎么办呢?这时如果不处理这些异常,程序很可能因报错而终止运行,所以异常处理还是十分有必要的. urllib的error模块定义 ...