想法
不想使用第三方的小程序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就是主页面向组件传递的参数。
如有误，欢饮留言！！！！
文章评论