• 小程序下拉框


    此博客链接: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{
         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;
         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;
         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

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

  • 相关阅读:
    Linux
    Linus
    Linux
    Linux
    Linux
    Linux
    Linux
    Linux
    Django日志配置
    linux
  • 原文地址:https://www.cnblogs.com/ping2yingshi/p/13191421.html
Copyright © 2020-2023  润新知