WeUI 在小程序中使用
才接触小程序。想找个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="data: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="data:images/icon_footer.png" style="width: 84px; height: 19px;"></image>
</view>
</view>
根组件
<view class="page">
</view>
<view class="page">
<!--页头-->
<view class="page__hd"></view>
<!--主体-->
<view class="page__bd"></view>
</view>
<view id="{{item.id}}" class="weui-flex" >
<view class="weui-flex__item">{{item.name}}</view>
<image class="kind-list__img" src="data:images/icon_nav_{{item.id}}.png"></image>
</view>
以上都收集自网络。自己用过可以的。
WeUI 在小程序中使用的更多相关文章
- 微信小程序中的组件
前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...
- 微信小程序中显示html富文本的方法
微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...
- 微信小程序中的自定义组件
微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...
- 网页或微信小程序中使元素占满整个屏幕高度
在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...
- 微信小程序中rpx与rem单位使用
原作者: 小小小 来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...
- 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)
在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...
- 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中发送模版消息注意事项
在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...
随机推荐
- td过长,将固定宽度table撑开
解决办法: 在table上加上样式: table{table-layout:fixed;word-break:break-all} table-layout:fixed tablle的列宽由表格宽 ...
- Linux更改ssh端口号,很easy!
因为公司业务需求,可能涉及到更改ssh远程的端口号,用下面方法轻松解决,废话不多说! 1.打开ssh端口配置文件:vim /etc/ssh/sshd_config,找到如下图所示的端口,改为自己想改的 ...
- AMD、CMD和CommonJS规范(转)
CommonJS规范 CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中.CommonJS规范是为了解决JavaScript的作用域问题而定义 ...
- avalon.js的循环操作在表格中的应用
avalon.js的循环操作在表格中的应用 一个JAVA开发,因为做的门户系统中,数据的展示加载的速度很影响使用效果,想到的是尽量少的请求后台,然后接触到了avalon,看介绍这是一个很轻很轻的MVV ...
- Linux文件服务器实战(匿名用户)
一.进程与线程 二.vsftp服务器 1.文件传输协议(file transfer protocol,FTP) 基于该协议ftp客户端和服务端实现文件共享,上传下载文件 FTP基于TCP协议生成一个虚 ...
- django+xadmin在线教育平台(十二)
6-4 用form实现登录-1 上面我们的用户登录的方法是基于函数来做的.本节我们做一个基于类方法的版本. 要求对类的继承有了解. 基础教程中基本上都是基于函数来做的,其实更推荐基于类来做.基于类可以 ...
- MySQL创建民族表的SQL语句
MySQL创建民族表的SQL语句 CREATE TABLE `nation` ( `id` ) unsigned NOT NULL AUTO_INCREMENT, `nation` ) NOT NUL ...
- 关于Mysql唯一索引的操作方法(添加删除)
首先我们查看一下News数据表的索引信息 使用命令 show index from ‘数据表名称’; 目前数据表中仅有一个主键索引 继续,我们给news表添加两个唯一索引(两种方法) 方法一 ...
- ubuntu中使用apt命令安装ipython失败解决方案
在最近使用ubuntu安装ipython时,出现如下报错: 出现这个问题,主要是因为apt还在运行,故解决方案为: 1.找到并且杀掉所有的apt-get 和apt进程 运行下面的命令来生成所有含有 a ...
- sql语句(Oracle和sqlserver)
查询表的首句:(Oracle) select * from (select a.*, rownum as rn from tab_name a order by col )where rn = 1 o ...