• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序下拉框

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

此博客链接:https://www.cnblogs.com/ping2yingshi/p/13191421.html

 

 

 

 

右键这个文件夹,新建下面的这个Component。然后输入需要创建的名称,我这里为了方便就取了select的名字。然后就会自动创建4个文件,js、json、wxml、wxss。

 

 

 组件样式

组件的wxml

<view class=\'com-selectBox\'>
    <view class=\'com-sContent\' bindtap=\'selectToggle\'>
        <view class=\'com-sTxt\'>{{nowText}}</view>
        <image src=\'../../public/img/local/down.png\'  class=\'com-sImg\'  animation="{{animationData}}"></image>
    </view>
    <view class=\'com-sList\' wx:if="{{selectShow}}">
        <view wx:for="{{propArray}}" data-index="{{index}}" wx:key=\'\' class=\'com-sItem\' bindtap=\'setText\'>{{item.text}}</view>
    </view>
</view>

组件的js

// Componet/Componet.js
Component({
  /**
   * 组件的属性列表
   */
    properties: {
        propArray:{
            type:Array,
        }
    },
  /**
   * 组件的初始数据
   */
    data: {
        selectShow:false,//初始option不显示
        nowText:\'\',//初始内容
        animationData:{}//右边箭头的动画
    },
  /**
   * 组件的方法列表
   */
    methods: {
   //option的显示与否
        selectToggle:function(){
            var nowShow=this.data.selectShow;//获取当前option显示的状态
            //创建动画
            var animation = wx.createAnimation({
                timingFunction:"ease"
            })
            this.animation=animation;
            if(nowShow){
                animation.rotate(0).step();
                this.setData({
                    animationData: animation.export()
                })
            }else{
                animation.rotate(180).step();                
                this.setData({
                    animationData: animation.export()
                })
            }
            this.setData({
                selectShow: !nowShow
            })
        },
        //设置内容
        setText:function(e){
            var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
            var nowIdx = e.target.dataset.index;//当前点击的索引
            var nowText = nowData[nowIdx].text;//当前点击的内容
            //再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
            this.animation.rotate(0).step();
            this.setData({
                selectShow: false,
                nowText:nowText,
                animationData: this.animation.export()
            })
            var nowDate={
              id:nowIdx,
              text:nowText
          }
          this.triggerEvent(\'myget\', nowDate)
        }
    }
})

组件的wxss

.com-selectBox{
    width: 200px;
}
.com-sContent{
    border: 1px solid #e2e2e2;
    background: white;
    font-size: 16px;
    position: relative;
    height: 30px;
    line-height: 30px;
}
.com-sImg{
    position: absolute;
    right: 10px;
    top: 11px;
    width: 16px;
    height: 9px;
    transition: all .3s ease;
}
.com-sTxt{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:0 20px 0 6px;
    font-size: 14px;
}
.com-sList{
    background: white;
    width: inherit;
    position: absolute;
    border: 1px solid #e2e2e2;
    border-top: none;
    box-sizing: border-box;
    z-index: 3;
    max-height: 120px;
    overflow: auto;
}
.com-sItem{
    height: 30px;
    line-height: 30px;
    border-top: 1px solid #e2e2e2;
    padding: 0 6px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.com-sItem:first-child{
    border-top: none;
}

 

 引入组件(下面代码都是在你要加入组件的额页面中添加)

1,在你引入组件的页面的json文件中配置

"usingComponents": {
    "Select": "/Componet/select/select"
}

2.在wxml中需要引入的位置插入下面代码

 <Select prop-array=\'{{selectArray}}\' bind:myget=\'getDate\'></Select>

3.在js中插入

 selectArray: [{
    "id": "0",
    "text": "100ml"
}, {
    "id": "1",
    "text": "200ml"
},
{
  "id": "2",
  "text": "300ml"
},
{
  "id": "3",
  "text": "400ml"
},
{
  "id": "4",
  "text": "500ml"
},
{
  "id": "5",
  "text": "1000ml"
},
{
  "id": "6",
  "text": "1500ml"
},
{
  "id": "7",
  "text": "2000ml"
},

通信

你加入组件的页面wxml中,插入的下面代码是用来对组件的数据进行绑定。

<Select prop-array=\'{{selectArray}}\' bind:myget=\'getDate\'></Select>

在你加入组件的页面js中,加入的新函数是为了获取选择的值。(需要复制下面代码),你可以在下面这个函数中,对选择的值做处理。

getDate:function(e){
    console.log(e.detail)
}

效果如下

 

 参考链接:https://www.cnblogs.com/zjjDaily/articles/9548433.html

备注:上面链接中的博主写的真不错,值得一看,我没有写代码的解释,想了解的可以看看。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序下拉菜单筛选发布时间:2022-07-18
下一篇:
DIV实现下拉菜单 - 小小小程序员发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap