van 自定义组件_vant 自定义 van-dropdown-item的用法
我们还是这个item 我们要在里面加东西 这可咋整
请选择
x
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
确定
取消
这代码怎么粘上来这么丑
我们要这个效果 中间可以自由滚动 上下固定
我们直接给最外层的一个弹性盒加换轴方向 中间 给 overflow-x:hidden; flex:1
.choice {
width: 434rpx;
height: 634rpx;
display: flex;
flex-direction: column;
.choice_top {
width: 100%;
height: 50rpx;
text-align: center;
line-height: 50rpx;
color: rgb(83, 83, 83);
position: relative;
.over {
color: rgb(203, 203, 203);
position: absolute;
right: 15rpx;
top: 0;
width: 50rpx;
height: 50rpx;
}
}
.choice_middle {
overflow-x: hidden;
flex: 1;
text-align: center;
}
.choice_bottom {
width: 100%;
height: 100rpx;
.choice_we {
width: 300rpx;
height: 63rpx;
margin-left: 63rpx;
margin-top: 35rpx;
.choice_we_left {
float: left;
height: 63rpx;
width: 50%;
text-align: center;
line-height: 63rpx;
font-size: 30rpx;
color: #fff;
background-color: rgb(156, 156, 156);
border-top-left-radius: 30rpx;
border-bottom-left-radius: 30rpx;
}
.choice_we_right {
float: left;
height: 63rpx;
width: 50%;
text-align: center;
line-height: 63rpx;
font-size: 30rpx;
color: #fff;
background-color: rgb(170, 191, 178);
border-top-right-radius: 30rpx;
border-bottom-right-radius: 30rpx;
}
}
}
}
}
补充知识:记录-vant实现select下拉框
记录-vant没有直接提供传统的select下拉框,我的意思是,单行单元格然后点击出现下拉框,样式和其他input统一。
1.需求 input focus下出现下拉框,选中选项后 值绑定给field
2.html部分 圆圈处是控制底部抽屉是否显示
3.data和methods部分
以上这篇vant 自定义 van-dropdown-item的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
van 自定义组件_vant 自定义 van-dropdown-item的用法相关推荐
- 小程序-实现自定义组件以及自定义组件间的通信
前言 对于组件的封装,在小程序当中对于多个页面的复用有着重要的作用,小程序中注册的每个页面都是独立的 页面的显示view层与逻辑层是通过data进行绑定关联,若需要更改页面中的数据,则通过setDat ...
- 学习旧岛小程序 (5) 自定义组件的自定义事件
自定义组件的触发事件: 自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名.detail对象和事件选项: this.triggerEvent('like', { behavio ...
- android 使用自定义组件,Android自定义组件开发之onMeasure使用
一.自定义组件造成其他组件的隐藏 我们在开发过程中往往现有的组件无法满足我们的需求,所有我们需要去自定义组件来实现我们的需求,在实现的过程中总会有各种问题,这里我们讨论一下onMeasure的使用,首 ...
- HarmonyOS之深入解析自定义组件与布局的实现
一.概述 HarmonyOS 提供了一套复杂且强大的 Java UI 框架,其中 Component 提供内容显示,是界面中所有组件的基类.ComponentContainer 作为容器容纳 Comp ...
- 20.番外篇——Vue如何自定义组件并且进行全局配置
20.番外篇--如何自定义组件并且进行全局配置 前言 1.创建自定义组件 2.导出自定义组件 3.main.js中引入自定义的公共组件并挂在到Vue 4.使用自定义的公共组件 前言 通过之前的系列文章 ...
- 《九》微信小程序中的自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护. 自定义组件:可复用的 WXML.WXSS.JS.JSON. beh ...
- 微信小程序中自定义组件
文章目录 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
- 微信小程序入门与实战之电影页面与实战自定义组件
Movie自定义组件 Movie自定义组件包含三部分:图片.标题和图片,评分可以再单独写一个组件. 实现代码: <view class="container">< ...
- 小程序 自定义组件Component
1.创建组件(1)一个自定义组件由json.wxml.wxss.js这4个文件组成(2)在对应json文件中声明为自定义组件{"component": true}2.组件配置Com ...
最新文章
- 20175320 2018-2019-2 《Java程序设计》第2周学习总结
- BZOJ.3527.[ZJOI2014]力(FFT)
- C#获取txt记事本内容,防止乱码情况
- 什么是好的API设计? 1
- sql报表按月统计_用Excel如何对销售数据按月分别统计成本,销售额以及利润?...
- 派生类从基类继承的过程
- 物联网设备获取北京时间、年月日、星期几,GMT格林威治标准时间转换为北京时间,授时api Fiddler抓包调试
- JavaScript设计模式之创建型设计模式
- python练手经典100例-非常适合Python菜鸟练手的趣味题(内附学习教程分享)
- Alpine Linux:如何配置GUI的图形桌面环境:x Desktop Environment
- 【数据可视化应用】绘制风玫瑰图(附Python代码)
- 直方图python_python实现直方图的应用
- html遮罩层样式,遮罩层样式
- 关于搭建简易广域网私人通信程序(python)一步到位!
- python写入TXT文件乱码,且utf-8无效
- python挂机脚本怎么运行,Python实现自动挂机脚本(基础篇)
- 让云助力企业数字化转型
- 數據移動時發生***識別欄位其外顯值只有當使用了資料行清單且 IDENTITY_INSERT 為 ON 時才能指定...
- 十进制逢十进一的意思
- 我的第二故乡 – 武汉