xquery是小程序的工具库，不是ui框架，因为缺少美感，所以xquery的demo基本上都不好看，图片都是我乱找的，xquery的目的是希望设计一套通用型模板远离模板地狱，并能像jq一样有一套灵活的组件交互机制

这篇示例是用xquery仿造社区里一篇demo做的，因为设计简单，符合我的审美。。。

源码在此

代码片段：https://developers.weixin.qq.com/s/VsJYLUm27VdV

wxml

用item组件构建弹窗组件

<view class="container">
  <view wx:if="{{mask}}" class="masker" bind:tap="closePop"></view>
  <ui-item item="{{popConfig}}" />
  <view class="func-btns" >
    <view class="btn" bind:tap="showPop">显示</view>
    <view class="btn" bind:tap="closePop">隐藏</view>
  </view>
</view>

数据结构配置

item组件实现弹窗的完整数据结构

const popConfig = {
  $$id: 'modal',
  itemClass: 'pop-class',
  title: 'item组件实现的pop弹窗',
  body: [
    {"@md": ` ### 内容部分支持图文，列表，表单等结构 `}
  ],
  footer: [
    {title: '取消', aim: 'btn1'}, // tap=>bind:tap, aim=>catch:tap
    {title: '同意', aim: 'btn2'},
  ],
  ...

实例方法

弹窗实例控制方法，使得弹窗能够与外部交互，使用item组件实现的组件，可通过methods属性可以为实例挂载方法

methods: {
  // 打开弹窗，从顶部落下的弹窗
  fromtop(){
    this.addClass('moveit')  // 追加一个动画类
  },
    
  // 关闭弹窗，
  close(){
    let thePager = this.activePage
    this.addClass('backtop') // 动画换回顶部
    setTimeout(() => {
      this.removeClass('moveit backtop')  // 移除动画类名
      thePager.setData({mask: false})  // 关闭遮板，这里的遮板定义在Page上，需要操作Page来隐藏遮板
    }, 500);
  },
    
  btn1(){
    Pager.alert('你点击了取消，1秒后关闭')
    setTimeout(() => {
      this.close()
    }, 1000);
  },
  btn2(){
    Pager.alert('你点击了同意')
  }
}

完整弹窗demo

下面的代码是完整实例代码

const Pager = require('../../components/aotoo/core/index')

const popConfig = {
  $$id: 'modal',
  title: 'item组件实现的pop弹窗',
  itemClass: 'pop-class',
  body: [
    {"@md": ` ### 内容部分支持图文，列表，表单等结构 `}
  ],
  footer: [
    {title: '取消', aim: 'btn1'},
    {title: '同意', aim: 'btn2'},
  ],
  methods: {
    fromtop(){
      this.addClass('moveit')
    },

    close(){
      let thePager = this.activePage
      this.addClass('backtop')
      setTimeout(() => {
        this.removeClass('moveit backtop')
        thePager.setData({mask: false})
      }, 500);
    },
	
    // 响应取消按钮
    btn1(){
      Pager.alert('你点击了取消，1秒后关闭')
      setTimeout(() => {
        this.close()
      }, 1000);
    },
    
    //响应同意按钮
    btn2(){
      Pager.alert('你点击了同意')
    }
  }
}

Pager({
  data: {
    mask: false,
    popConfig
  },

  closePop(e){
    let $modal = this.getElementsById('modal')
    $modal.close()
  },

  showPop(e){
    let $modal = this.getElementsById('modal')
    this.setData({mask: true})
    $modal.fromtop()
  },
})

wxss

css的调整才是最花时间的部分

[@keyframes](/user/keyframes) fromtop {
  from {
    transform: translate3d(0, -170%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

[@keyframes](/user/keyframes) backtop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -170%, 0);
  }
}

.markdown-body .h3 {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
}

.masker {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0.4;
  background-color: #000;
  z-index: 100;
}

.pop-class{
  display: none;
  width: 70vw;
  height: 50vh;
  position: fixed;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 1px 3px 10px -8px rgba(204, 204, 204, .7);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  box-sizing: border-box;
  padding: 10px;
  z-index: 200;
  background-color: #fff;
}

.pop-class.moveit{
  display: block;
  animation: fromtop ease 0.5s forwards;
}
.pop-class.moveit.backtop {
  animation: backtop ease 0.4s forwards;
}

.pop-class .hfooter{
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
}

.pop-class .hfooter .hf-item {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #999;
  border-radius: 10px;
  transition: all ease .3s;
}

.pop-class .hfooter .hf-item:active {
  transform: scale(.97, .97);
}

.func-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.func-btns .btn {
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

over

github地址：https://github.com/webkixi/aotoo-xquery

小程序demo演示