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短视频开发,自定义下拉列表, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(37)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示