[微信小程序]记一次微信小程序的自定义组件2

最新推荐文章于 2023-03-10 09:37:55 发布
最新推荐文章于 2023-03-10 09:37:55 发布
阅读量284 收藏
点赞数
分类专栏： 微信小程序 组定义组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ycsr_/article/details/105389672
版权

[微信小程序]自定义组件—下拉选择

小程序项目中需要使用下拉框组件 本想使用原生选择器 但是需求必须完全还原设计图 无奈参考网上各路大神 记录一下自定义组件
效果图

第一步在json中需要配置：
component 为 true 设为自定义组件
singComponent 作为引用组件的页面的json的声明配置项，值为引用的组件路径。

JSON

// An highlighted block
{
  "component": true,
  "usingComponent": {}
}

wxml中写组件的基本结构和需要绑定的属性，值和事件
tapDistrictNav ： 下拉框折叠事件
selectDistrictLeft ： 区域下拉联动父级事件
selectItems ： 选中值的点击方法

data-nav： 用来判断当前下拉框的值
data-model ： 具体值

ps：这里没有进行代码精简优化 算是比较糙的一版 后期可以改进一下

WXML

// An highlighted block
<view class="nav">
  <view class="nav-child {{folding_open1? 'active' : ''}}" bindtap="tapDistrictNav" hidden='{{dropDownMenuDistrictData.length > 0 ? false :true}}' data-nav="{{dropDownMenuTitle[0]}}">
    <view class="nav-title">{{district_right_select_name.length > 0 ?district_right_select_name : dropDownMenuTitle[0]}}</view>
    <view class="icon"></view>
  </view>
  <view class="nav-child borders {{folding_open2? 'active' : ''}}" bindtap="tapDistrictNav" hidden='{{dropDownMenuSourceData.length > 0 ? false : true}}' data-nav="{{dropDownMenuTitle[1]}}">
    <view class="nav-title">{{selected_source_name.length > 0 ?selected_source_name : dropDownMenuTitle[1]}}</view>
    <view class="icon"></view>
  </view>
  <view class="nav-child borders-right {{folding_open3? 'active' : ''}}" bindtap="tapDistrictNav" hidden='{{dropDownMenuStyleData.length > 0 ? false : true}}' data-nav="{{dropDownMenuTitle[2]}}">
    <view class="nav-title">{{selected_style_name.length > 0 ?selected_style_name : dropDownMenuTitle[2]}}</view>
    <view class="icon"></view>
  </view>
  <view class="nav-child {{folding_open4 ? 'active' : ''}}" bindtap="tapDistrictNav" hidden='{{dropDownMenuFilterData.length > 0 ? false : true}}' data-nav="{{dropDownMenuTitle[3]}}">
    <view class="nav-title">{{selected_filter_name.length > 0 ?selected_filter_name : dropDownMenuTitle[3]}}</view>
    <view class="icon"></view>
  </view>
</view>

<view class="district {{folding_open1 ? 'show' : 'disappear'}} ">
  <view class="half half-left">
    <view 
      class="{{district_left_select == item.id ? 'current_left_select' : ''}}" 
      wx:for="{{dropDownMenuDistrictData}}" 
      bindtap="selectDistrictLeft" 
      data-model='{{item}}' 
      wx:key="unique">
      {{item.title}}
    </view>
  </view>
  <view class="half half-right">
    <view 
      class="{{district_right_select == item.id ? 'current_right_select' : ''}}" 
      wx:for="{{dropDownMenuDistrictDataRight}}" 
      bindtap="selectItems" 
      data-model='{{item}}' 
      data-nav="{{dropDownMenuTitle[0]}}"
      wx:key="unique">
      {{item.title}}
    </view>
  </view>
</view>

<view class="container container_hd {{folding_open2 ? 'show' : 'disappear'}} ">
  <view class='z-height'>
    <view>
      <block wx:for="{{dropDownMenuSourceData}}" wx:key="unique">
        <view 
          class="sortitem {{selected_source_id==item.id ? ' active ' : ' '}}"  
          data-model='{{item}}' 
          data-nav="{{dropDownMenuTitle[1]}}"
          bindtap='selectItems'> 
          {{item.title}}
        </view>
      </block>
    </view>
  </view>
</view>
<view class="container container_hd {{folding_open3 ? 'show' : 'disappear'}} ">
  <view class='z-height'>
    <view>
      <block wx:for="{{dropDownMenuStyleData}}" wx:key="unique">
        <view 
          class="sortitem {{selected_style_id==item.id ? ' active ' : ' '}}" 
          data-model='{{item}}' 
          data-nav="{{dropDownMenuTitle[2]}}"
          bindtap='selectItems'> 
          {{item.title}}
        </view>
      </block>
    </view>
  </view>
</view>
<view class="container container_hd {{folding_open4 ? 'show' : 'disappear'}} ">
  <view class='z-height'>
    <view>
      <block wx:for="{{dropDownMenuFilterData}}" wx:key="unique">
        <view 
          class="sortitem {{selected_filter_id==item.id ? ' active ' : ' '}}" 
          data-model='{{item}}' 
          data-nav="{{dropDownMenuTitle[3]}}"
          bindtap='selectItems'> 
          {{item.title}}
        </view>
      </block>
    </view>
  </view>
</view>

wxss样式不多说 没什么需要改动 引用时可以用margin或者定位改变在父组件位置

WXSS

// An highlighted block
.page {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.position {
  position: absolute;
}

.nav {
  position: relative;
  z-index: 99;
  display: flex;
  border-bottom: 1px solid #f7f7f7;
  background: #fff;
}

.nav-child {
  display: flex;
  flex: 1;
  text-align: center;
  height: 48rpx;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin: 20rpx 0;
}

.borders-right {
  border-right: 1px solid #e6e6e6;
}

.borders-left {
  border-left: 1px solid #e6e6e6;
}

.borders {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

.nav-title {
  display: inline-block;
}

.icon {
  display: inline-block;
  border: 4px solid transparent;
  border-top: 4px solid #9b9b9b;
  margin-left: 5px;
  margin-top: 10rpx;
}

.container {
  position: relative;
  z-index: 4;
  font-size: 14px;
}


.slidedown {
  transform: translateY(0%);
}

.district {
  position: absolute;
  display: none;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.5);
}

.district .half {
  overflow-y: scroll;
  float: left;
  width: 50%;
  height: 600rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  font-size: 14px;
}

.half view {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 15rpx;
}

.half-left {
  background: #f7f7f7;
}

.half-center {
  background: #fff;
}

.half-right {
  background: #fff;
}

.half-right view {
  border-bottom: 1px solid #f7f7f7;
}

.current_left_select {
  background: #fff;
}

.current_right_select {
  background: #fff;
  color: #E22317;
}

.nav-child.active .nav-title {
  color: #E22317;
}

.nav-child.active .icon {
  border-bottom: 4px solid #E22317;
  border-top: 0;
}

@keyframes slidown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0%);
  }
}

.slidown {
  display: block;
  animation: slidown 0.2s ease-in both;
}

@keyframes slidup {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

.z-height {
  overflow-y: scroll;
  background: #fff;
}

.slidup {
  display: block;
  animation: slidup 0.2s ease-in both;
}

.disappear {
  display: none;
}

.show {
  display: block;
}

.slidowntop {
  display: flex;
  flex-direction: row;
  padding: 20rpx 24rpx 10rpx 24rpx;
}

.emptyall {
  margin-left: 475rpx;
  color: #E22317;
}

.emptyallright {
  width: 80rpx;
  text-align: center;
}

.endselect {
  width: 350rpx;
  text-align: left;
}

.return {
  margin-left: 200rpx;
  color: #E22317;
}

.slidowncenter {
  margin-top: 20rpx;
  padding-top: 20rpx;
  padding-left: 24rpx;
  display: flex;
  flex-direction: row;
  align-content: space-between;
  border-top: solid #d1d3d4 1rpx;
}

.slidownbottom {
  margin-top: 10rpx;
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.sortitem {
  border-bottom: solid #f7f7f7 1rpx;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}

.sortitem.active {
  color: #E22317;
}

.container_hd {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.5);
}

组件js 同wxml 代码比较糙 因为开始假设区域是静态数据 所以方法有待改进 可以只传一个当前行政区划代码 在组件里进行请求 获取数据

JS

// An highlighted block
Component({
  properties: {
    dropDownMenuTitle: {
      type: Array,
      value: [],
    },
    dropDownMenuDistrictData: {
      type: Array,
      value: [],
      observer: function(newVal, oldVal) {
        console.log(newVal,oldVal)
        let model = newVal[0] ? newVal[0] : null
        this.selectDefaltDistrictLeft(model)
      }
    },

    dropDownMenuSourceData: {
      type: Array,
      value: []
    },
    dropDownMenuStyleData: {
      type: Array,
      value: []
    },
    dropDownMenuFilterData: {
      type: Array,
      value: []
    },
  },
  data: {
    // private properity
    folding_open1:false,      //区域
    folding_open2:false,      //来源
    folding_open3:false,      //租售状态
    folding_open4:false,      //排序
    shownavindex: '',
    dropDownMenuDistrictDataRight: {},
    district_left_select: '',
    district_right_select: '',
    district_right_select_name: '',
    selected_style_id: 0,
    selected_style_name: '',
    selected_source_id: 0,
    selected_source_name: '',
    selected_filter_id: 0,
    selected_filter_name: '',
  },
  methods: {
    
    //全部折叠
    foldingSetData(){
      this.setData({
        folding_open1: false,
        folding_open2: false,
        folding_open3: false,
        folding_open4: false,
        shownavindex: 0
      })
    },
    //收起展开
    tapDistrictNav: function(e) {
      // console.log(e)
      let navId = e.currentTarget.dataset.nav;
      let navName = e._relatedInfo.anchorTargetText
      // console.log("nav",navId)
      if (this.data.folding_open1 || this.data.folding_open2 || this.data.folding_open3 || this.data.folding_open4) {
        this.foldingSetData()
      }else{
        switch(true) {
          case navId == '区域':
              this.setData({
                folding_open1: true,
                shownavindex: e.currentTarget.dataset.nav
              })
             break;
          case navId == '来源':
              this.setData({
                folding_open2: true,
                shownavindex: e.currentTarget.dataset.nav
              })
             break;
          case navId == '租售':
              this.setData({
                folding_open3: true,
                shownavindex: e.currentTarget.dataset.nav
              })
            break
          case navId == '排序':
              this.setData({
                folding_open4: true,
                shownavindex: e.currentTarget.dataset.nav
              })
            break
          default:
            this.foldingSetData()
        }  
      }
      // console.log(e)
    },
    selectDefaltDistrictLeft(model) {
      if (!model) {
        return
      }
      var model = model.childModel;
      // console.log("model",model)
      var selectedId = model.id
      var selectedTitle = model.title;
      this.setData({
        dropDownMenuDistrictDataRight: model ? model : '',
        district_left_select: selectedId,
        district_right_select: '',
      })
    },
    //
    selectDistrictLeft: function(e) {
      var model = e.target.dataset.model.childModel;
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      this.setData({
        dropDownMenuDistrictDataRight: model ? model : '',
        district_left_select: selectedId,
        district_right_select: '',
      })
    },
    // 提炼代码
    selectItems(e){
      console.log(e)
      let navId = e.currentTarget.dataset.nav;
      let selectedId = e.target.dataset.model.id
      let selectedTitle = e.target.dataset.model.title;
      this.closeHyFilter();
      if(navId == '区域'){
        this.setData({
          district_right_select: selectedId,
          district_right_select_name: selectedTitle
        })
      }else if(navId == '来源'){
        this.setData({
          selected_source_id: selectedId,
          selected_source_name: selectedTitle
        })
      }else if(navId == '租售'){
        this.setData({
          selected_style_id: selectedId,
          selected_style_name: selectedTitle
        })
      }else if(navId == '排序'){
        this.setData({
          selected_filter_id: selectedId,
          selected_filter_name: selectedTitle
        })
      }
      this.triggerEvent("selectedItem", {
        index: this.data.shownavindex,
        selectedId: selectedId,
        selectedTitle: selectedTitle
      })
    },
    /*关闭筛选 */
    closeHyFilter: function() {
      if (this.data.folding_open1 || this.data.folding_open2 || this.data.folding_open3 || this.data.folding_open4) {
        this.foldingSetData()
      }
    },
  },
  //组件生命周期函数，在组件实例进入页面节点树时执行
  attached: function() {


  },

})
ycsr_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现手指拖动选项排序
10-15
主要介绍了微信小程序实现手指拖动选项排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
wxSortPickerView微信小程序首字母排序选择表
08-10
wxSortPickerView-微信小程序首字母排序选择表
开发 | 手把手教你实现微信小程序中的自定义组件
zhanglir333的博客
01-13 1019
之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只是寥寥几句，一笔带过而已，所以写起来真的是非常非常痛苦。 好在微信小程序的库从 1.6.3 开始，官方对于自定义组件这一块有了比较大的变动，最直观的感觉就是文档比以前全多了。 还有就是，现在小程序支持简洁的组件化编程，可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中复用，提高自己代码的
微信小程序 hidden 无效
ioioao的博客
12-26 227
记录一下开发中遇到的bug： 当盒子使用了flex布局是，hidden失效
微信小程序 联系客服按钮自定义 非多个排列方式
qq_33575234的博客
02-27 301
挺简单的，官方的组件加个样式就行了，拿transform变形拉伸一下就行，直接上代码吧 <contact-button class="contact"></contact-button> .contact{ transform: scale(4,2); opacity: 0; } 需要多大拉多大，定位定好，覆盖在你自己写...
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
在微信小程序开发中，自定义组件是提升代码复用性和应用可维护性的重要手段。本教程将探讨如何利用canvas 2D API来实现一个高效、可定制的环形进度条自定义组件。Canvas 2D 提供了一套丰富的绘图接口，让我们能够...
微信小程序--自定义选择颜色（组件）
07-29
1、微信小程序、颜色、组件、可自定义选择 2、该资源科用于用户自定义选择喜欢的颜色 3、已经封装成组件，可以直接调用即可 4、成功运用于网上用户，体验效果好 5、想要的小伙伴可以直接拿去使用，方便快捷高效的...
微信小程序城市列表选择自定义组件
03-11
"微信小程序城市列表选择自定义组件"就是一个专门针对城市选择场景设计的组件。它允许开发者根据特定需求定制城市选择功能，提供了丰富的交互体验和灵活性。 首先，我们要理解这个组件的核心功能。城市列表选择组件...
详解微信小程序自定义组件的实现及数据交互
10-16
微信小程序自定义组件是开发小程序时经常会用到的一个特性，它允许开发者封装可复用的UI组件，提高代码的重用性和项目的可维护性。本文将深入探讨如何实现微信小程序的自定义组件以及如何在组件间进行数据交互。 ...
微信小程序 下拉菜单
Carina的编程技术博客
06-05 2137
微信小程序 下拉菜单 效果： 1.wxml <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bin...
小程序左右菜单联动效果
03-25
这是小程序左右菜单联动效果，数据都是本人手动模拟，请注意，数据结构，如有更改，自己调整，请自行下载。
微信小程序 WXDropDownMenu组件详解及实例代码
09-01
主要介绍了微信小程序 WXDropDownMenu组件详解及实例代码的相关资料,需要的朋友可以参考下
省市区选择器上拉加载下拉刷新等多个有用微信小程序例子
04-18
微信小程序有用例子，适合初学者练手及公司项目使用
【微信小程序】基础篇 -- 自定义组件 -- 创建与引用 &样式（三十二）
最新发布
JMFive的博客
03-10 5153
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第32篇文章;今天开始学习微信小程序的第17天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序自定义组件
weixin_48884617的博客
05-06 8116
微信小程序自定义组件
小程序基本命令
aiven1637的博客
10-30 3288
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序自定义navbar
Smile_ping的博客
07-04 3770
自定义导航栏 项目中需求: 导航栏在插画上, 这时需要采用自定义导航栏实现. 在json配置中把navigationStyle设置为custom, 这时只会保留右上角胶囊按钮. 公共的导航栏编写一个自定义组件调用. 欢迎大神们指教… 效果图 创建组件 类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成. 首先需要在 json 文件中进行自定义组件声明, 将co...
自定义微信小程序tabBar实现与代码示例
在微信小程序开发中，有时候我们可能需要对微信提供的默认tabBar样式进行自定义，以便更好地适应项目的特定需求。微信小程序的自定义tabBar功能允许开发者完全控制底部导航栏的外观、布局和交互行为。以下是实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值