读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

左侧弹出菜单栏目【小程序】

2020年09月21日 103点热度 0人点赞 0条评论

想法

不想使用第三方的小程序UI组件,理由是因为第三方组件是所有常见组件的集合,css样式代码过于庞大,虽然说是轻量级的组件,但是对于小程序来说,依旧很庞大。并且在一个小程序中也不一定用到所有的组件,却是引入全部的css代码。

所以我想将每一个组件单独剥离出来,当使用到某一个组件的时候,就引入对应的组件和样式即可。

效果图:

 

左侧弹出菜单栏目【小程序】插图

思路和上一篇文章类似微信小程序UI组件:底部弹出【pop-up】

源码:

<!-- 阴影 -->

<view class="yd_overlay  {{show?'yd_show_overlay':'yd_close_overlay'}}" bindtap="close_overlay"></view>

<!-- 左侧栏目 -->
<view bindtap="close_overlay" class="left_container  {{show?'yd_left_content':'yd_close_overlay'}}">左侧栏目</view>

css:

.yd_overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.yd_show_overlay {
  width: 100%;
  transition-property: width;
  transition-duration: 900ms;
  transition-timing-function: ease;
}

.yd_close_overlay {
  width: 0;
  transition-property: width;
  transition-duration: 900ms;
  transition-timing-function: ease;
}

.left_container {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  background: red;
  z-index: 999;
  overflow: hidden;
}

.yd_left_content {
  width: 20%;
  transition-property: width;
  transition-duration: 900ms;
  transition-timing-function: ease;
}

js:

Component({
  properties: {
    show: Boolean,
  },
  data: {},
  attached: function(e) {},
  methods: {
    close_overlay() {
      this.setData({
        show: false
      })
    },
    pop_left() {
      this.setData({
        show: true
      })
    }
  },
})

以上代码已经将组件编写好了,在其他页面使用的时候,在json文件中直接引入即可:

{
  "usingComponents": {
    "popup-left":"../Components/popupLeft/popupLeft"
  }
}

wxml:

  <!-- 引入组件 -->
  <popup-left show="{{showleft}}"></popup-left>

show就是主页面向组件传递的参数。

 

如有误,欢饮留言!!!!

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
JavaScript CSS git 随笔 mysql flutter node Echarts 悦读 hook redux taro 小程序 阅读 Nginx vue 闲谈 react canvas
推荐文章
  1. 微信小程序UI组件:底部弹出【pop-up】
  2. 微信小程序中自定义导航和地图定位
  3. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  4. 小程序全局和局部自定义导航栏样式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号