<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> |
.weui-flex { -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-cells { margin-top: 0; opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .3s; transition: .3s; } .weui-cells:before, .weui-cells:after { display: none; } .weui-cells_show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .weui-cell:before { right: 15px; } .kind-list__item { margin: 10px 0; background-color: #FFFFFF; border-radius: 2px; overflow: hidden; } .kind-list__item:first-child { margin-top: 0; } .kind-list__img { width: 30px; height: 30px; } .kind-list__item-hd { padding: 20px; -webkit-transition: opacity .3s; transition: opacity .3s; } .kind-list__item-hd_show { opacity: .4; } .kind-list__item-bd { height: 0; overflow: hidden; } .kind-list__item-bd_show { height: auto; } |
Page({ data: { list: [ { id: 'form', name: '表单', open: false, pages: ['button', 'list', 'input', 'slider', 'uploader'] }, { id: 'widget', name: '基础组件', open: false, pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loadmore', 'panel', 'preview', 'progress'] }, { id: 'feedback', name: '操作反馈', open: false, pages: ['actionsheet', 'dialog', 'msg', 'picker', 'toast'] }, { id: 'nav', name: '导航相关', open: false, pages: ['navbar', 'tabbar'] }, { id: 'search', name: '搜索相关', open: false, pages: ['searchbar'] } ] }, kindToggle: function (e) { var id = e.currentTarget.id, list = this.data.list; for (var i = 0, len = list.length; i < len; ++i) { if (list[i].id == id) { list[i].open = !list[i].open } else { list[i].open = false } } this.setData({ list: list }); } }); |
模板简介:该模板名称为【微信小程序WEUI原生体验基础样式库设计模板教程下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。