这是仿微信支付 H5 页面，使用 WeUI 制作，并且兼容了 iPhone X、iPhone X Max、 iPhone XR 等机型。

仿微信支付H5页面
查看效果：仿微信支付H5页面演示

制作过程

1、HTML

由于 HTML 略长，贴出来的代码我们省略了一部分类似的，完整代码请在底部查看。

<div class="wrap dowebok">
    <div class="pay dwo-pay">
        <a href="javascript:" class="pay-qrcode">
            <i></i>
            <p>收付款</p>
        </a>
        <a href="javascript:" class="pay-wallet">
            <i></i>
            <p>钱包 <span>¥125.36</span></p>
        </a>
    </div>
    <div class="grids has-more dwo-mt10">
        <div class="grids-title dwo-title">
            <h2>腾讯服务</h2>
        </div>
        <div class="weui-grids">
            <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="images/icon1.png" alt="">
                </div>
                <p class="weui-grid__label">信用卡还款</p>
            </a>
            ...
            <a href="http://www.dowebok.com/" class="weui-grid weui-grid-more">
                <div class="weui-grid__icon">
                    <img src="images/icon10.png" alt="">
                </div>
                <p class="weui-grid__label">医疗健康</p>
            </a>
        </div>
    </div>
    <div class="grids-more"><span class="toggle">更多服务</span></div>

    <div class="grids dwo-mt10">
        <div class="grids-title dwo-title">
            <h2>第三方服务</h2>
        </div>
        <div class="weui-grids">
            <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="images/icon11.png" alt="">
                </div>
                <p class="weui-grid__label">火车票机票</p>
            </a>
            <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="images/icon12.png" alt="">
                </div>
                <p class="weui-grid__label">滴滴出行</p>
            </a>
            ...
        </div>
    </div>
</div>

2、CSS

CSS 代码这次我们使用图片来展示试试效果。

CSS 代码

3、Javascript

var hasMore = document.querySelectorAll('.has-more')
var toggle = document.querySelectorAll('.toggle')

;[].forEach.call(toggle, function(item, index) {
    item.addEventListener('click', function () {
        item.classList.toggle('show')
        hasMore[index].classList.toggle('show-more')
        item.textContent = item.textContent == '更多服务' ? '收起' : '更多服务'
    })
})

到这里就制作完了，如需下载完整代码，请前往：仿微信支付H5页面