WeUI 在小程序中使用
来源:互联网 发布:松下笔记本电脑 知乎 编辑:程序博客网 时间:2024/06/05 23:56
才接触小程序。想找个ui框架。。也不知道咋弄;
下载地址:点击打开链接
- 将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下
- 引入weui.wxss
- 方式一:在app.wxss内或者需要的页面引入style/weui.wxss。
- 方式二:在app.wxss内或者需要的页面引入style/widget下的组件的wxss
WeUI的使用
<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>
根组件
<view class="page"></view>
页头和主体使用class="page__xx"(注意是两个下划线)
<view class="page"><!--页头--><view class="page__hd"></view><!--主体--><view class="page__bd"></view></view>
其他组件采用weui-xx,例如class = "weui-flex"。
<view id="{{item.id}}" class="weui-flex" > <view class="weui-flex__item">{{item.name}}</view> <image class="kind-list__img" src="images/icon_nav_{{item.id}}.png"></image></view>
以上都收集自网络。自己用过可以的。
阅读全文
0 0
- WeUI 在小程序中使用
- WeUI for 小程序--使用教程
- TODO:小程序集成WeUI
- 【微信小程序】微信小程序中WeUI的使用
- 微信公众号及小程序开发使用weui无效解决方法
- Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)
- 在应用程序中和Applets小程序中使用archive
- 在应用程序中和Applets小程序中使用archive
- 使用AWK在shell中生成日历的小程序
- 微信小程序开发之——weui-wxss的使用
- 微信小程序 WeUi.wxss
- lib-flexible与jquery-weui在使用中的冲突
- 微信小程序引入weui组件
- 在小程序中学习flex布局
- 使用EgretWing 在浏览器看小程序
- WeUI
- WeUI
- 01 在 Ubuntu/CentOS 中使用 Eclipse 来开发 MapReduce 程序 小例子
- java基本数据类型自动转换规则
- 第一天
- 揭秘施密特正交化
- VMware Workstation Pro&Eclipse|IDEA|BEX5
- OC基础-01-OC简介
- WeUI 在小程序中使用
- javaFX 的入门使用
- Git 的简明指南
- http://www.uml.org.cn/zjjs/201607081.asp
- CSS 优质文章整理
- HihoCoder
- spark源码阅读二-spark job执行
- 利用反射完成一个类中,属性的批量赋值操作
- Dining POJ