欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序WEUI原生体验基础样式库设计模板教程下载

    2018-05-24 12:24 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来WEUI原生体验基础样式库设计模板教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="page">
        <view class="page__hd">
            <view class="page__title">WeUI</view>
            <view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。</view>
        </view>
        <view class="page__bd page__bd_spacing">
            <view class="kind-list">
                <block wx:for-items="{{list}}" wx:key="{{item.id}}">
                    <view class="kind-list__item">
                        <view id="{{item.id}}" class="weui-flex kind-list__item-hd {{item.open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle">
                            <view class="weui-flex__item">{{item.name}}</view>
                            <image class="kind-list__img" src="images/icon_nav_{{item.id}}.png"></image>
                        </view>
                        <view class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}">
                            <view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}">
                                <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                                    <navigator url="{{page}}/{{page}}" class="weui-cell weui-cell_access">
                                        <view class="weui-cell__bd">{{page}}</view>
                                        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                                    </navigator>
                                </block>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <view class="page__ft">
            <image src="images/icon_footer.png" style="width: 84px; height: 19px;"></image>
        </view>
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议