color 字体颜色

title 标题

<uni-nav-bar background-color=#d3233b  color="#FFFFFF"  title="睿智法务" ></uni-nav-bar>

<input> 输入框

type 类型

placeholder 文本框里的提示文字

singleline   单行模式

class    css样式调用

	<input  v-model="userData.phone" type="number" placeholder="请输入手机号" :singleline="true"  class="input_str"/>

<button> 按钮

type 类型

size 大小

@click 点击事件

  <button type="primary" size="mini" @click="doLogin" >登录</button> 				

<uni-popup>弹出层

type 弹出方式

  <uni-popup ref="popup" type="dialog">

<uni-popup-dialog > 对话框

mode 对话框模式

title 标题

content  对话框内容，mode为base模式下生效

duration

before-close 是否拦截按钮事件,如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的                         close 方法

@close          点击事件,点击dialog取消按钮触发

@confirm       点击事件,点击dialog确定按钮触发

   <uni-popup-dialog mode="base" title="通知" content="手机号或密码错误" :duration="2000" :before-close="true" @close="close" @confirm="close"></uni-popup-dialog>	

open(){
			this.$refs.popup.open()
close() {
				this.$refs.popup.close()
<uni-group>分组
 
tiile   标题
 
border   模式 
 
top   上填充
 
	<uni-group title="系统用户管理:用户管理" top="10" mode="card">
 
<uni-table>  表格
 
<uni-table type="selection" :border="true">
 
<uni-tr> 行
 
align="cengter"  居中
 
              <uni-tr>
				 <uni-th align="center">昵称</uni-th>
				 <uni-th align="center">手机号</uni-th>
				 <uni-th align="center">状态</uni-th>
				 <uni-th align="center">操作</uni-th>
				</uni-tr>
 
<uni-td >列
 
<uni-tr v-for="user in userList" >
				 <uni-td >{{user.nickname}}</uni-td>
				 <uni-td >{{user.phone}}</uni-td>
				 <uni-td align="center">
				  <text v-if="user.isactive==1">已激活</text>
				  <text style="color: red;" v-if="user.isactive==2" >已停用</text>
				 </uni-td>
				 <uni-td align="center">
				 <button class="uni-button" size="mini" type="primary" 
                 @click="modify(user.id)">修改</button>
				  <button class="uni-button" size="mini" type="warn" 
                      @click="deleteUser(user.id)" style="margin-left:15rpx;">删除</button>
				 </uni-td>
</uni-tr>
 
v-for="user in userList" 循坏
 
v-if="user.isactive==1" 判断
 
<uni-tr v-for="user in userList" >
				 <uni-td >{{user.nickname}}</uni-td>
				 <uni-td >{{user.phone}}</uni-td>
				 <uni-td align="center">
				  <text v-if="user.isactive==1">已激活</text>
				  <text style="color: red;" v-if="user.isactive==2" >已停用</text>
				 </uni-td>
 
<uni-pagination> 分页器
 
current  页码
 
pageSize  每页显示的数据条数
 
total  数据总条数
 
	<uni-pagination :current="pageIndex"  :pageSize="pageSize" :total="pageTotle"  @change="pageChange" />
 
<uni-drawer > 抽屉 
 
mode(left)  模式  在左侧打开抽屉  
 
mask-click  点击事件是否打开  true 表示打开
 
<uni-drawer ref="showLeft" mode="left" :mask-click="true">
 
mask  是否显示遮罩
 
<uni-list>  列表 
 
<uni-list -item> 列表子组件
 
title  标题
 
showArrow   是否显示箭头图标 true 表示确定显示
 
clickable   列表点击事件  true 表示可以点击触发事件
 
<uni-list>
							<uni-list-item @click="jump(1)"  title="用户管理" :showArrow="true" :clickable="true"></uni-list-item>
							<uni-list-item @click="jump(2)" title="角色管理" :showArrow="true" :clickable="true"></uni-list-item>
							<uni-list-item @click="jump(3)" title="资源管理" :showArrow="true" :clickable="true"></uni-list-item>
				        </uni-list>
 
@click   点击事件 点击触发方法
 
     jump(flag){
				if(flag==1){
					uni.redirectTo({
						url: '../user/user'
				}else if(flag==2){
					console.log("跳转到角色管理");
				}else if(flag==2){
					console.log("跳转到资源管理");
<scroll-view style="height: 100%;" scroll-y="true">
 
可滚动视图区域。用于区域滚动。
 
scrolly-y  允许纵向滚动
 
<uni-collapse ref="collapse" >        
 
<uni-collapse-item title="系统管理" :showArrow="true">
 
 折叠面板 子组件
 
<template>
		<!--标题栏-->
		<uni-nav-bar background-color=#d3233b  color="#FFFFFF"  title="睿智法务后台管理系统" leftText="功能列表" @clickLeft="showDrawer" rightText="系统退出" @clickRight="exitLogin"></uni-nav-bar>
        <!--抽屉--> 	
		<uni-drawer ref="showLeft" mode="left" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<uni-collapse ref="collapse" >						
					<uni-collapse-item title="系统管理" :showArrow="true">
						<uni-list>
							<uni-list-item @click="jump(1)"  title="用户管理" :showArrow="true" :clickable="true"></uni-list-item>
							<uni-list-item @click="jump(2)" title="角色管理" :showArrow="true" :clickable="true"></uni-list-item>
							<uni-list-item @click="jump(3)" title="资源管理" :showArrow="true" :clickable="true"></uni-list-item>
				        </uni-list>
					</uni-collapse-item>
				</uni-collapse>
			</scroll-view>
		</uni-drawer>
	</view>
</template>
 
@clickLeft="showDrawer"  左侧按钮点击事件 触发方法
 
leftText="功能列表"    左侧按钮文本
 
rightText="系统退出"   右侧按钮文本
 
@clickRight="exitLogin"  右侧按钮点击事件 触发方法
 
<uni-nav-bar background-color=#d3233b  color="#FFFFFF"  title="睿智法务后台管理系统" leftText="功能列表" @clickLeft="showDrawer" rightText="系统退出" @clickRight="exitLogin"></uni-nav-bar>
 
	/*打开功能列表*/
			showDrawer(){
				this.showDrawer();
			/*退出登录*/
			exitLogin(){
				uni.redirectTo({
					url: '../login/login'
 onShow() 方法  在页面加载的时候用的方法
 
onShow() {
			this.requsetUserList();
uni.request({  代码块 })  网络请求后台接口时使用的方法
 
url  : 请求后台接口的路径
 
success  请求成功后的回调函数
 
uni.request({
					url: 'http://localhost:8070/user/getAll/'+this.pageIndex+'/'+this.pageSize, //仅为示例，并非真实接口地址。
					success: (res) => {				
					    console.log(res.data);
				     this.userList=res.data.data;
					 this.pageTotle=res.data.rows;
uni.redirectTo({ 代码块})  页面与页面之间的请求
 
url  页面的路径
 
uni.redirectTo({
					url: '../user/updateUser?id='+id
页面与页面直接通url 路径传递参数
 
路径  ? 参数=  +{拼接符} 参数(方法传递过来的参数)
 
modify(id){
				uni.redirectTo({
					url: '../user/updateUser?id='+id
onLoad(opthions){}  页面传递过来的参数用这个方法接收
 
通过参数opthions 可以点出来页面传递过来的参数
 
onLoad(opthions){
			var id=opthions.id;//获取上个页面传过来的参数		
			console.log("页面传参:id="+id)
			this.id=opthions.id