android短视频开发,自定义下拉列表
android短视频开发,自定义下拉列表
custom-drop-down/index.wxml
1 | <br><!--pages/component/custom-drop-down/index.wxml--><br><view style= "position: relative; display: flex; flex-direction: column;" ><br> <view style= "display:flex; align-items: center; border:black 1px solid" bindtap= "clickShow" ><br> <view class = "dropdown-value" >{{provinceValue}}</view><br> <image src= "./../../../images/arrow-down.png" class = "dropdown-image" ></image><br> </view><br> <view style= "height: 100px; border:darkgray 1px solid" wx: if = "{{show}}" ><br> <scroll-view style= "height: 100px;" scroll-y= "ture" ><br> <view wx: for = "{{option2}}" wx:key= "value" bindtap= "selectIndex" data-index= "{{index}}" class = "dropdown-item" ><br> {{item.text}}<image src= "./../../../images/duihao.png" class = "dropdown-item-img" wx: if = "{{item.selected}}" ></image><br> </view><br> </scroll-view><br> <br> </view><br> </view><br>custom-drop-down/index.wxss<br> /* pages/component/custom-drop-down/index.wxss */ <br>.dropdown-item {<br> margin: 10px 10px;<br>}<br>.dropdown-item-img {<br> float: right;<br> right: 15px;<br> width: 16px; height: 16px;<br>}<br>.dropdown-image {<br> width: 16px; height: 16px;<br>}<br>.dropdown-value {<br> flex: 1;padding-left: 5px;<br>} |
custom-drop-down/index.js
1 | <br> // pages/component/custom-drop-down/index.js<br>Component({<br> /**<br> * 组件的属性列表<br> */<br> properties: {<br> option2: {<br> type: Array,<br> value: [<br> { text: '默认排序', value: 'a' },<br> { text: '好评排序', value: 'b' },<br> { text: '销量排序', value: 'c' },<br> ]<br> },<br> show: {<br> type:Boolean,<br> value:false<br> }<br> },<br> <br> /**<br> * 组件的初始数据<br> */<br> data: {<br> provinceValue:'排序'<br> },<br> <br> /**<br> * 组件的方法列表<br> */<br> methods: {<br> clickShow: function() {<br> this.setData({<br> show:!this.data.show<br> })<br> },<br> selectIndex: function(option) {<br> console.log('selectIndex',option);<br> let index = option.currentTarget.dataset.index;<br> console.log('selectIndex====',this.data.option2[index].text);<br> for(let i=0;i<this.data.option2.length;i++) {<br> let item = this.data.option2[i];<br> if(i == index) {<br> item.selected = true;<br> } else {<br> item.selected = false;<br> }<br> }<br> this.setData({<br> provinceValue:this.data.option2[index].text,<br> option2:this.data.option2,<br> show:false<br> })<br> }<br> }<br>})<br>custom-drop-down/index.json<br>{<br> "component": true,<br> "usingComponents": {}<br>} |
调用:
1 | <br><custom-dropdown option2= "{{option2}}" ></custom-dropdown> |
以上就是android短视频开发,自定义下拉列表, 更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现