網站首頁 編程語言 正文
模擬下拉下單
原樣式示例:
1、第一種:修改為自己需要的樣式及功能:
<view class="items select-box">
<view class="items-text">是否已告知物業(必填)</view>
<picker @change="bindPickerChange" :value="index" :range="array" class="picker-box" v-if="pickerShow">
<input class="select-input" type="text" placeholder="請選擇是否已告知物業" v-if="index == -1" disabled="disabled"></input>
<view class="select-input" type="text" v-else>{{array[index]}}</view>
</picker>
<view class="icon-img">
<!-- 下拉角標圖片 -->
<image src="../../static/img/select-icon.png"></image>
</view>
</view>
data() {
return {
index: -1,
array: ['是', '否'],
}
},
methods: {
// 下拉列表
bindPickerChange: function(e) {
console.log('picker發送選擇改變,攜帶值為', e.detail.value)
this.index = e.detail.value
},
},
<style>
/* 下拉列表 start */
.select-box{
position: relative;
}
.picker-box{
width:100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 10rpx;
box-sizing:border-box;
}
.select-input{
width:100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 10rpx;
border: 1rpx solid #BDBDBD;
padding-left: 22rpx;
box-sizing:border-box;
}
.icon-img{
position: absolute;
top: 84rpx;
right: 18rpx;
width: 18rpx;
height: 18rpx;
}
.icon-img image{
width:100%;
height:100%;
}
/* 下拉列表 end */
</style>
2、第二種
<view class="other-item">
<view>選擇種類</view>
<view class="right-box">
<picker @change="bindPickerChange" :value="index" :range="array">
<view v-if="index == -1">請選擇種類</view>
<view v-else>{{array[index]}}</view>
</picker>
<view class="right-icon">
<image src="../../static/img/more.png"></image>
</view>
</view>
</view>
data() {
return {
index: -1,
array: ['1', '2', '3'],
}
},
methods: {
// 下拉列表
bindPickerChange: function(e) {
console.log('picker發送選擇改變,攜帶值為', e.detail.value)
this.index = e.detail.value
},
},
<style>
.other-item{
font-size: 30rpx;
color: #666666;
padding-top: 12rpx;
display: flex;
justify-content:space-between;
align-items: center;
margin-bottom: 17rpx;
}
.right-box{
display: flex;
align-items: center;
}
.right-icon{
width: 16rpx;
height: 28rpx;
margin-left: 24rpx;
}
.right-icon image{
width: 100%;
height: 100%;
}
</style>
原文鏈接:https://blog.csdn.net/maoge_666/article/details/131084628
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2022-03-28 詳解Python操作Excel之openpyxl_python
- 2022-03-22 C語言中map函數的基礎用法詳解(C語言map函數用法)
- 2022-11-03 C#中委托、事件和回調的使用及說明_C#教程
- 2022-10-27 React的createElement和render手寫實現示例_React
- 2022-04-16 論文查重python文本相似性計算simhash源碼_python
- 2022-07-07 在Kubernetes集群中搭建Istio微服務網格的過程詳解_云其它
- 2023-05-13 python中flatten()函數用法詳解_python
- 2023-01-29 Python操作lxml庫之基礎使用篇_python
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支