dev_actionsheet

活动页

平台专门定制了移动端页面常用的活动页，包括活动页和分享页。

1.活动页

活动页封装到了框架中UM对象上，可以直接调用UM.actionsheet(option)方法，实现活动页的调用。

param

option={
      title: '',
      items: [],
      callbacks: [function () {

      }, function () {

      }]
}

• title: string 活动页的标题；
• items: array 活动页中的选项，可以添加任意多项；
• callbacks: array 回调函数数组每一项为一个回调函数，回调函数数组中的每一项对应一个选项，并且个数必须不小于选项的个数

示例代码：

$('#main .phone').on('click', function () {
       UM.actionsheet({
           title: '请选择：',
           items: ['拍照', '选取本地图片'],
           callbacks: [function () {
               alert('拍照')
           }, function () {
               alert('选取本地图片')
           }]
       });

})

上述代码实现的是移动端上传头像功能界面，在回调函数数组中编写业务逻辑代码，可实现上传功能。

2.分享页面

分享界面由于需求与界面要求难统一，通过参数设定较难实现，平台提供参照模板，及使用方法。

html结构：

   <!--分享页面-->
   <div class="um-share" id="share">
       <div class="um-grid">
           <div class="um-grid-row tc">
               <div class="item">
                   <a href="#" class="um-circle um-black">
                       <img src="${path}/img/WeChat_circle.png" width=40 class="um-img-responsive" alt="">

                       <div class="f12 mt5">微信朋友圈</div>
                   </a>
               </div>
               <div class="item">
                   <a href="#" class="um-circle um-black">
                       <img src="${path}/img/WeChat.png" width=40 class="um-img-responsive" alt="">

                       <div class="f12 mt5">微信好友</div>
                   </a>
               </div>
               <div class="item">
                   <a href="#" class="um-circle um-black">
                       <img src="${path}/img/QQ.png" width=40 class="um-img-responsive" alt="">

                       <div class="f12 mt5">QQ好友</div>
                   </a>
               </div>
               <div class="item">
                   <a href="#" class="um-circle um-black">
                       <img src="${path}/img/QQ_circle.png" width=40 class="um-img-responsive" alt="">

                       <div class="f12 mt5">QQ空间</div>
                   </a>
               </div>
           </div>
       </div>
       <div class="btn" onclick="shareCancle()">取消分享</div>
   </div>

通过点击特定的a标签来显示出分享页面

 <a href="#" class="popBtn btn mt30" data-target="share">分享</a>

分享页的html结构必须要设置id=‘share’值，a标签中data-target='share'是必须有的属性，只有设置这个属性值，才能关联到id='share'的分享页。

执行的js代码：

$('.um-grid-row').on('click', '.item', function () {
    var text = $(this).find('div').text();
    alert(text);
    UM.share.close();
})

UM.share.close()可用来实现隐藏分享页。

活动页的测试demo的github地址。