位置: IT常识 - 正文

uni-app 自定义下拉框(uniapp自定义下拉刷新上拉加载)

编辑:rootadmin
uni-app 自定义下拉框

推荐整理分享uni-app 自定义下拉框(uniapp自定义下拉刷新上拉加载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp自定义下拉,uniapp 自定义下拉刷新区域,uniapp 自定义下来刷新组件,uniapp 自定义下来刷新组件,uniapp 自定义下拉刷新动画,uniapp 自定义下拉刷新区域,uniapp自定义下拉刷新上拉加载,uniapp自定义下拉,内容如对您有帮助,希望把文章链接给更多的朋友!

如图:

html:

<view class="row-item">

<view class="lable-tit">性别:</view>

<view class="selected-all">

<view class="drop-down-box" @click="btnShowHideClick">

<text class="dropdown-content">{{choiceContent}}</text>

<image class="dropdown-icon" src="/static/down.png" mode="widthFix"></image>

</view> 

<view class="dialog-view" v-if="isShowChoice">

<text :class="choiceIndex ==index ?'dialog-title-selected':'dialog-title'"

v-for="(item ,index) in choiceList"

@click="btnChoiceClick(index,item.choiceItemContent)">{{item.choiceItemContent}}</text>

</view>  

</view>

</view>

css

/* 下拉选择框 start*/

.dialog-title-selected {

color: white;

font-size: 16upx;

text-align: center;

background-color: #ea433a;

line-height: 25upx;

}

.dialog-title {

color: #A6A6A6;

font-size: 16upx;

background-color: white;

text-align: center;

line-height: 25upx;

}

.dialog-view {

display: flex;

flex-direction: column;

justify-content: center;

width: 100%;

border: 1upx solid #CACACA;

box-sizing: border-box;

position: absolute;

top: 45px;

left: 0;

z-index: 999;

}

.dropdown-icon {

width: 25rpx;

height: 25rpx;

margin: auto 0;

}

uni-app 自定义下拉框(uniapp自定义下拉刷新上拉加载)

.dropdown-content {

color: #A6A6A6;

font-size: 16upx;

margin-left: 10upx;

}

.drop-down-box {

display: flex;

justify-content: space-between;

align-items: center;

line-height: 35upx;

height: 35upx;

width: 100%;

border: 1upx solid #CACACA;

border-radius: 5upx;

box-sizing: border-box;

padding-right: 10upx;

}

.selected-all {

display: flex;

flex-direction: column;

justify-content: center;

width: 60%;

height: 45px;

position: relative;

}

data:

choiceList: [{

choiceItemId: "0",

choiceItemContent: "请选择"

}, {

choiceItemId: "1",

choiceItemContent: "男"

}, {

choiceItemId: "2",

choiceItemContent: "女"

}],

choiceContent: "请选择", //选择的内容

choiceIndex: 0, //选择位置

isShowChoice: false,

methods:

btnChoiceClick: function(position) {

var _this = this

_this.choiceIndex = position

_this.isShowChoice = false

_this.choiceContent = _this.choiceList[position].choiceItemContent

},

// 显示与隐藏选择内容

btnShowHideClick: function() {

var _this = this

_this.choiceContent = "";

if (_this.isShowChoice) {

_this.isShowChoice = false

} else {

_this.isShowChoice = true

}

},

本文链接地址:https://www.jiuchutong.com/zhishi/280922.html 转载请保留说明!

上一篇:电脑桌面小工具添加教程(电脑桌面小工具软件)

下一篇:Linux Mint设置面板位置以及添加面板元素的方法(linux mib)

  • 美团关注店铺怎么操作(美团关注店铺怎么关闭)

    美团关注店铺怎么操作(美团关注店铺怎么关闭)

  • 华为p40pro屏幕分辨率是多少呢(华为p40pro屏幕分辨率是2k吗)

    华为p40pro屏幕分辨率是多少呢(华为p40pro屏幕分辨率是2k吗)

  • iphone12颜色有哪些(iphone12的颜色有几种)

    iphone12颜色有哪些(iphone12的颜色有几种)

  • 华为荣耀8x手机有重力感应吗(华为荣耀8x手机壳)

    华为荣耀8x手机有重力感应吗(华为荣耀8x手机壳)

  • 苹果相册一直显示更新怎么办(苹果相册一直显示正在更新怎么办)

    苹果相册一直显示更新怎么办(苹果相册一直显示正在更新怎么办)

  • 微信怎么拉别人进自己群(微信怎么拉别人黑名单)

    微信怎么拉别人进自己群(微信怎么拉别人黑名单)

  • ipad air2是几代(ipad air2是几代和mini4参数对比)

    ipad air2是几代(ipad air2是几代和mini4参数对比)

  • 惠普1319硒鼓型号(惠普131打印机硒鼓)

    惠普1319硒鼓型号(惠普131打印机硒鼓)

  • 三星一关机就安全模式(三星一关机就安装应用)

    三星一关机就安全模式(三星一关机就安装应用)

  • 常见的网络设备有哪些(常见的网络设备及功能)

    常见的网络设备有哪些(常见的网络设备及功能)

  • wxid开头的微信号是什么意思(wxid开头的微信号怎么加不了好友)

    wxid开头的微信号是什么意思(wxid开头的微信号怎么加不了好友)

  • 怎么删掉被移除的微信群(怎么删掉移除的app)

    怎么删掉被移除的微信群(怎么删掉移除的app)

  • 如何改华为手机锁屏时间(如何改华为手机下方的按键)

    如何改华为手机锁屏时间(如何改华为手机下方的按键)

  • id退出照片怎么恢复(id退出后照片会自动清除吗)

    id退出照片怎么恢复(id退出后照片会自动清除吗)

  • 怎样把qq音乐移到u盘(怎样把qq音乐移到sd卡)

    怎样把qq音乐移到u盘(怎样把qq音乐移到sd卡)

  • wps制作表格怎么放大(wps制作表格怎么在表格里加斜线)

    wps制作表格怎么放大(wps制作表格怎么在表格里加斜线)

  • pr导入音乐用什么格式(pr能导入什么格式的音乐文件?)

    pr导入音乐用什么格式(pr能导入什么格式的音乐文件?)

  • 南京5g试点在哪(南京5g覆盖区域)

    南京5g试点在哪(南京5g覆盖区域)

  • 早教机怎么连接网络(早教机怎么连接手机)

    早教机怎么连接网络(早教机怎么连接手机)

  • 桌面相册不见了怎么办(桌面相册不见了怎么放回去)

    桌面相册不见了怎么办(桌面相册不见了怎么放回去)

  • vivox9s屏幕分辨率怎么调(vivox9l屏幕分辨率)

    vivox9s屏幕分辨率怎么调(vivox9l屏幕分辨率)

  • 芒果tv二维码在哪(芒果tv二维码在哪里找)

    芒果tv二维码在哪(芒果tv二维码在哪里找)

  • Linux下如何安装deb格式的安装包?deb安装包安装教程(linux怎么安装程序)

    Linux下如何安装deb格式的安装包?deb安装包安装教程(linux怎么安装程序)

  • 华为分享连接电脑教程(华为分享连接电脑显示检查您的拼写)

    华为分享连接电脑教程(华为分享连接电脑显示检查您的拼写)

  • clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装(vue clonedeep)

    clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装(vue clonedeep)

  • JavaScript -- Map对象及常用方法介绍(js map())

    JavaScript -- Map对象及常用方法介绍(js map())

  • 冲回存货跌价准备所得税是调增还是调减
  • 油费补助记什么科目
  • 工资发放流程以及如何记账
  • 出口销售收入会计分录
  • 长期股权投资会减值损失吗
  • 非货币性资产交换的记忆口诀
  • 建筑企业预缴印花税会计分录
  • 贴现利息可以抵扣吗
  • 外资企业股权转让所得税率
  • 企业必须要现金流入吗
  • 计提租金分录怎么处理
  • 设备安装增值税适用税率
  • 企业所得税发票在哪里打印
  • 总资产报酬率可以用净利润计算吗
  • 银行代收费业务会计分录
  • 替票是什么和发票的区别
  • 员工转入子公司怎么做账
  • 50万股份分红
  • 个税申报密码是什么意思
  • 增值税月末如何计算
  • 怎么免费获取百度文库的付费文档
  • 主营业务收入平均增长率计算例题
  • 高新技术企业研发人员比例要求
  • 如何解决心脏供血不足
  • 公司已开票给客户,但客户未打款怎么办?
  • php function
  • 只有收据没有发票是不是逃税
  • nfcmp3
  • hpzts04.exe是什么进程 有什么作用 hpzts04进程查询
  • vue移动端pc端适配方案
  • nvm安装教程
  • css3题目
  • ajax跨域请求的原理是什么
  • dos命令暂停停10s
  • 小客车能用多少年
  • wordpress建立数据库错误
  • 计入固定资产的条件
  • 织梦网站老是被挂马
  • python logger
  • 营业成本的构成
  • 购买办公用品如何写摘要
  • sqlserver数据库中进行查询所使用的语言为
  • 企业所得税业务招待费怎么调整
  • 固定资产计提折旧凭证怎么做
  • 财务费用减少记借方还是贷方
  • 商业会计怎么做会计分录
  • 固定资产清理借方增加还是减少
  • 应补税额是要交钱
  • 管理费用的核算方法
  • 主营业务收入需要减去增值税吗
  • 销售不动产计税税率
  • 报销没有消费凭据怎么办
  • 一般纳税人月底进项税销项税怎么做分录
  • 财务费用的科目编码是多少
  • 企业经营规模小怎么办
  • mysql varchar2
  • sql优化的一般步骤
  • windows xp操作
  • c盘满了怎么释放空间
  • 因为你的策略组阻止
  • win10注册表详解
  • 华硕a400u安装win7
  • os x 10.10.5
  • win8和win10双系统切换
  • 图形学实验报告总结
  • unity3D游戏开发
  • AndroidSharedpreference数据共享
  • css ie8
  • 常用的八种教学方法
  • unity3dwasd移动
  • 安卓接口分类
  • java编程基础知识入门
  • js调用url接口
  • jqueryui draggable
  • jQuery插件封装时如要实现链式编程,需要
  • springmvc接收json需要配
  • 不用税控盘可以清卡吗
  • 广州市地税局领导名单
  • 建筑施工企业一级资质企业,安全生产管理
  • 税务投诉电话12345
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设