小程序组件-dropdownMenu

今天给大家带来的是在开发小程序过程中遇到一个下拉菜单，废话不多说先给大家上一波图。（感谢崔老师-其实是萌萌的大汉-给与后期帮助与完善）

一开始页面硬画出来的效果还不错，但是需求做到后面发现又有多个下拉框菜单，但是菜单的内容同。熟悉下拉框的同学都知道

其实实现一个下拉框代码还是蛮多的，后面如果有更多的下拉框，仅仅改改业务数据，然后拷贝结构代码的思路是不合适的，这样会导致页面非常的冗余，结构非常乱，所以边想办法把这个下拉框做成组件，这样便可以灵活运用了。好废话不多说了，直接给源码了，这里提醒一点：读懂并灵活运用必须具有html，css ，js基础，除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档，这里介绍完如何使用之后就直接上源码了，如有同道中人欢迎来踩沙发。

第一，在页面的json文件中引用已经写好的组件。

第二，在页面page中使用该标签，标签名称就是步骤1中对应的key。

第三页面js传入source的数据结构必须满足下图，value无所谓，key一定要一致。

好了到这就结束了，大家可以尝试这去使用，谢谢大家。

扫描二维码关注公众号，回复： 2967737 查看本文章

这里将组件的部分代码奉上，详情请看下载链接。

<!--wxml-->
 <view
   class="component-container" 
   id="component-container"
   style="height:{{componentHeight}}"
  >
    <view class="navigator-bar">
      <view
        class="nav-item" 
        wx:for="{{source}}" 
        wx:key="{{index}}" 
        catchtap="switchPannel" 
        data-options="{{item.options}}" 
        data-activity="{{item}}"
      >
        <text class="nav-title {{currentActivity.id === index && !hidePannel ?'activity-nav' : ''}}">{{item.title}}:</text>
        <text class="nav-content {{currentActivity.id === index && !hidePannel ?'activity-nav' : ''}}">{{item.content.name}}</text>
        <image
          src="{{currentActivity.id === index && !hidePannel ?'/images/icon_up.png' : '/images/icon_down.png'}}"
          class="icon"
        ></image>
      </view>
    </view>

    <view class="shade" hidden="{{hidePannel}}">
      <view class="pannel-container">
        <view class="pannel">
          <view
            class="pannel-item {{selectedPannelItem.name === item.name ? 'pannel-item-selected' : ''}}" 
            wx:for="{{currentOption}}" 
            wx:key="{{index}}" 
            catchtap="selectPannelItem" 
            data-option="{{item}}"
          >
            <text class="pannel-item-text {{selectedPannelItem.name === item.name ? 'pannel-item-text-selected' : ''}}">{{item.name}}</text>
          </view>
        </view>

        <view class="pannel_foot">
          <button class="foot_btn reset" bindtap="closePannel">取消</button>
          <button class="foot_btn confirm" bindtap="confirm">确定</button>
        </view>
      </view>  
    </view>
  </view>

/**js***/
// components/dropdownMenu/dropdownMenu.js
const defaultSource = [{
    id: 0,
    title: "排序",
    content: { name: "未选择" },
    options: [
      { name: "首付比例" },
      { name: "余值比例" },
      { name: "期次" },
      { name: "租金范围" },
    ],
  },
  {
    id: 1,
    title: "方式",
    content: { name: "未选择" },
    options: [
      { name: "升序" },
      { name: "降序" }
    ],
  }];

Component({
  properties: {
    source: {
      type: Array,
      value: defaultSource,
      description: '数据源'
    }
  },
data: {
    currentActivity: defaultSource[0],
    currentOption: defaultSource[0].options,
    hidePannel: true,
    selectedPannelItem: '',
    componentHeight: '50vh',
  },
  
  ready: function() {
    const that = this;
    const query = wx.createSelectorQuery().in(this)
    const screenHeight = wx.getSystemInfoSync().screenHeight;
    query.select("#component-container").boundingClientRect(function (res) {
      const height = screenHeight - res.top - 64 + 'px';
      that.setData({ componentHeight: height });
    }).exec();
  },

  methods: {
    switchPannel: function(e) {
      const options = e.currentTarget.dataset.options;
      const activity = e.currentTarget.dataset.activity;
      if (this.data.hidePannel) {
        this.openPannel();
      } else if (this.data.currentActivity.id === activity.id) {
        this.closePannel();
      }
      this.setData({ currentOption: options, currentActivity: activity });
    },

    selectPannelItem: function(e) {
      const option = e.currentTarget.dataset.option;
      this.setData({ selectedPannelItem: option });
    },

    confirm: function(e) {
      const evtDetail = this.data;
      const selectedItem = this.data.selectedPannelItem;
      this.data.source[this.data.currentActivity.id] = {
        ...this.data.currentActivity,
        content: selectedItem
      };
      this.setData({ source: this.data.source });
      this.triggerEvent('onOk', evtDetail);
      this.closePannel();
    },

    openPannel: function() {
      this.setData({ hidePannel: false });
    },

    closePannel: function() {
      this.setData({ hidePannel: true });
    }
  }
})

奉上代码链接：https://download.csdn.net/download/u013368397/10603933

小程序组件-dropdownMenu

猜你喜欢