当前位置:主页 > 微信开发 > WeUI >

微信网页开发操作反馈弹出式菜单ActionSheet

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-05
  在微信里面或者说在手机里面由于屏幕尺寸的有限,如果菜单在一个网页显示的话,可能会增加用户负担,在做小程序开发时能尽量减少用户上下拉滚动条的就尽量减少,如果有需要必须使用菜单的话,可以把一个菜单隐藏起来,然后,通过点击一个按扭把隐藏的菜单弹出来,这样不仅可以节省微信网页的空间,而且,还可以增加用户体验,要实现这个功能是由ActionSheet组件来实现的。

示例
ios  android
示例代码

<div id="actionSheet_wrap">
    <div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
    <div class="weui-actionsheet" id="weui-actionsheet">
        <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="actionsheet_cancel">取消</div>
        </div>
    </div>

    <div class="weui-skin_android" id="weui-android-actionsheet" style="display: none">
        <div class="weui-mask"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
            </div>
        </div>
    </div>
</div>

 
  我们知道手机系统主要有Android和ios两种系统,所以,对应的弹出式菜单也有两种。

  ActionSheet用于显示包含一系列可交互的动作集合,包括说明、跳转等。由底部弹出,一般用于响应用户对页面的点击。

  也就是说ActionSheet包含的菜单是可以交互的动作集合,也就是上面示例中的一个一个的菜单,用户在点击按扭后会出一个菜单,在这个菜单里面列出了相应的菜单项,用户可以点击菜单项,点击菜单项后就会跳转到相应的页面。

  当然,弹出式菜单也可以不是菜单,意思就是弹出来的可以是说明信息或是其它信息,当然,一般用作弹出式菜单。


ActionSheet结构

  虽然,ActionSheet有两种类型的弹出式菜单,也就是ios和android系统里面的两种弹出式菜单,但是,这两种类型的弹出式菜单的菜单项是一样的。

  菜单项代码:

        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
            </div>
        </div>


  包括最外层的容器weui-actionsheet,里面是个体的菜单项。

  wui-actionsheet__menu类所在的容器里面就是具体的菜单项了,这个类有点类似<ul>标签的意思,在<ul>里面是一个一个的<li>,而在这个菜单里面虽然,没有出现<ul>和<li>,但是,代替的是weui-actionsheet__menu 相当于<ul> ,weui-actionsheet__cell相当于菜单项<li>。

  在菜单外面是不同的CSS遮罩,即ios是weui-mask_transparent,android是weui-mask。

  另外,在ios系统里面的弹出菜单里面含有“取消”操作,也就是在类weui-actionsheet__action所在的容器里面,这个操作在android系统里面没有。


源码分析

  1)遮罩类的设置:

  当用户点击弹出式菜单时会在弹出的菜单背景有一个灰色的遮罩层,这样一方面会突出菜单的内容,另一方面当用户点击遮罩层时菜单可以消失掉,这个遮罩的样式是如何实现的呢?

  对应的css源码是:

  .weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.weui-mask_transparent {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}


  上面是在ios和android系统里面定义的css样式,从上面的样式我们可以看出使用了fixed定位方式,这种方式在生成绝对定位时,是相对于浏览器的,而上、下、左、右值全部为零,表示遮罩层遮罩整个手机屏幕。

  2)菜单位置:

  从上面示例可以看出在ios和android 系统里面的弹出菜单的位置是不同的,在ios里面弹出菜单是从底部弹出,并且,铺满整个屏幕,而ios里面的弹出菜单则是只点手机屏幕一小块位置,并且,距离左边有一定距离。

ios 菜单对应的源码:

.weui-actionsheet {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5000;
  width: 100%;
}


android 菜单对应的源码:

.weui-skin_android .weui-actionsheet {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 274px;
}


  上面精简后的css代码,从上面代码可以看出ios弹出菜单的位置是铺满整个左右手机屏幕的,而android菜单宽度则是274px宽度。

  3) ios系统弹出菜单:

  在ios系统里面弹出菜单后,会把遮罩层给覆盖掉,是因为,设置了堆叠值z-index: 5000; 这个z-index值大于遮罩层的值1000,所以,我们看到了菜单是白色的背景而不是灰色的。

  只要把上面这几点弄明白了,那和以,这个菜单也就掌握了,在WeUI封装的这个组件里面,最重要的还是css里面的定位。