Uni-App-04

主页开发

保存主页数据

<script>
import { indexData, base } from '@/service'export default {data() {return {base,				//把服务器基础地址变量设置为数据属性carousels:[],		//轮播广告条目列表menuItems:[],		//当前用户选中的功能菜单列表activities:[],		//最新的社区活动列表}},//生命周期方法：组件加载完成async onLoad() {	//弹出“欢迎回来”提示框uni.showToast({title:'欢迎回来',icon: 'none',duration: 3000})//向服务器请求首页数据let data = await indexData()this.carousels = data.carousels		//轮播广告this.menuItems = data.menuItems		//功能菜单this.activities = data.activities	//社区活动},methods: {}}
</script>

轮播图实现

swiper

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

属性说明

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
active-class	String		swiper-item 可见时的 class	支付宝小程序
changing-class	String		acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class	支付宝小程序
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序、飞书小程序不支持
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序、飞书小程序不支持
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	支付宝小程序
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。	支付宝小程序
display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	App、微信小程序、京东小程序
disable-touch	Boolean	false	是否禁止用户 touch 操作	App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更	字节跳动小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序、京东小程序
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	App、H5、微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	字节跳动小程序与飞书小程序不支持

<!-- F1: 轮播广告 -->
<!-- indicator-dots：是否显示“小圆饼”指示器 -->
<!-- autoplay：是否自动播放轮播广告 -->
<!-- interval：时间间隔，两个广告间停留时间 -->
<!-- duration：持续时长，一个广告的过渡动画持续时长 -->
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"><swiper-item v-for="(c, i) in carousels" :key="i"><view class="swiper-item"><image @click="jump(c.href)" :src="base + c.pic" mode="widthFix"/></view></swiper-item>	
</swiper>

<script>
import { indexData, base } from '@/service'export default {data() {return {base,				//把服务器基础地址变量设置为数据属性carousels:[],		//轮播广告条目列表menuItems:[],		//当前用户选中的功能菜单列表activities:[],		//最新的社区活动列表}},//生命周期方法：组件加载完成async onLoad() {	//弹出“欢迎回来”提示框uni.showToast({title:'欢迎回来',icon: 'none',duration: 3000})//向服务器请求首页数据let data = await indexData()console.log(data);this.carousels = data.carousels		//轮播广告this.menuItems = data.menuItems		//功能菜单this.activities = data.activities	//社区活动},methods: {jump(url){console.log(url)//导航跳转到指定页uni.navigateTo({ url })}}}
</script>

<style scoped lang="scss">//提示：页面中可以使用标签选择器，但是组件中不能使用		.swiper {height: 300rpx;.swiper-item > image {width: 750rpx;}}
</style>

功能菜单实现

需要安装uni-grid组件

Uni-Grid

组件名：uni-grid

宫格组件。

uni-grid 属性说明：

属性名	类型	默认值	说明
column	Number	3	每列显示个数
borderColor	String	#d0dee5	边框颜色
showBorder	Boolean	true	是否显示边框
square	Boolean	true	是否方形显示
highlight	Boolean	true	点击背景是否高亮

<!-- F2: 功能菜单 -->
<!-- column：一行中默认显示几列 -->
<!-- showBorder：是否显示边框 -->
<!-- square：每个宫格项是否显示为方形 -->
<uni-grid class="func-menu" :column="4" :showBorder="false" :square="true"><uni-grid-item v-for="(item,i) in menuItems" :key="i"><view class="menu-item" @click="jump(item.href)"><image :src="base+item.pic" mode="widthFix"/><text>{{item.title}}</text></view></uni-grid-item>
</uni-grid>

<style scoped lang="scss">.func-menu {margin-top: $uni-spacing-col-base;background-color: $uni-bg-color;.menu-item {height: 100%;//把弹性容器的主轴方向修改为：纵向flex-direction: column;//弹性容器中的子元素在主轴方向上居中对齐justify-content: center;//弹性容器中的子元素交叉轴方向上居中对齐align-items: center;> image { width:35%; margin-bottom: $uni-spacing-col-sm; }}}
</style>

商业服务功实现

需要安装uni-card扩展组件

组件名：uni-card

Uni-Card

卡片组件通常用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。

Card Props

属性名	类型	默认值	说明
title	String	-	标题文字
sub-title	String	-	副标题文字
extra	String	-	标题额外信息
thumbnail	String	-	标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：/static/xxx.png
cover	String	-	封面图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：/static/xxx.png
is-full	Boolean	false	卡片内容是否通栏，为true时将去除padding值
is-shadow	Boolean	false	卡片内容是否开启阴影
shadow	String	0px 0px 3px 1px rgba(0, 0, 0, 0.08)	卡片阴影,需符合 css 值
border	Boolean	true	卡片边框
margin	String	10px	卡片外边距
spacing	String	10px	卡片内边距
padding	String	10px	卡片内容内边距
border	Boolean	true	卡片边框
mode[弃用]	String	basic	卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片
note[弃用]	String	-	底部信息

<!-- F3: 商业服务 -->
<!-- isFull：是否显示为“通栏卡片”(左右撑满) -->
<uni-card class="card" title="| 商业服务" is-full><view class="service"><!-- 左侧：房屋租售 --><view class="service-item"><view class="txt"><text>房屋租售</text><view><navigator>租房</navigator><navigator>短租</navigator></view></view>	<!-- 图片缩放模式1：widthFix --><!-- 图片缩放模式2：scaleToFill：不保持原始宽高比，缩放图片填满指定宽高 --><image class="img" mode="scaleToFill" src="../../static/img/chuzu.png"/></view><!-- 右侧：便民服务 --><view class="service-item"><view class="txt"><text>便民服务</text><view><navigator>便利店</navigator><navigator>超市</navigator></view></view>	<image class="img" mode="scaleToFill" src="../../static/img/bianmin.png"/></view></view>
</uni-card>

App.vue

//清除自定义样式对系统默认组件的影响
view.card {flex-direction: column;//使用!important提升当前样式的优先级，可以覆盖系统默认样式margin-top: $uni-spacing-col-base !important;
}

.service {width: 100%;.service-item {//弹性子元素尺寸增长权重为：1flex: 1;padding-top: $uni-spacing-col-sm;padding-bottom: $uni-spacing-col-sm;&:nth-child(1) {padding-right: $uni-spacing-row-sm;}&:nth-child(2) {padding-left: $uni-spacing-row-sm;}justify-content: space-between; //弹性容器中的子元素在主轴方向上：空白在中央align-items: center; //弹性容器中的子元素在交叉轴方向上：居中对齐.img { width: 150rpx; height: 120rpx;}.txt { font-size: $uni-font-size-sm; flex-direction: column; flex: 1; //弹性子元素尺寸增长权重：1navigator {margin-right: $uni-spacing-row-sm;}}}
}

社区活动功能实现

需要安装uni-ist

Uni-List

组件名：uni-list

List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。

List Props

属性名	类型	默认值	说明
border	Boolean	true	是否显示边框

ListItem Props

属性名	类型	默认值	说明
title	String	-	标题
note	String	-	描述
ellipsis	Number	0	title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;
thumb	String	-	左侧缩略图，若thumb有值，则不会显示扩展图标
thumbSize	String	medium	略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;
showBadge	Boolean	false	是否显示数字角标
badgeText	String	-	数字角标内容
badgeType	String	-	数字角标类型，参考uni-icons
badgeStyle	Object	-	数字角标样式，使用uni-badge的custom-style参数
rightText	String	-	右侧文字内容
disabled	Boolean	false	是否禁用
showArrow	Boolean	true	是否显示箭头图标
link	String	navigateTo	新页面跳转方式，可选值见下表
to	String	-	新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功
clickable	Boolean	false	是否开启点击反馈
showSwitch	Boolean	false	是否显示Switch
switchChecked	Boolean	false	Switch是否被选中
showExtraIcon	Boolean	false	左侧是否显示扩展图标
extraIcon	Object	-	扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}，参考 uni-icons
direction	String	row	排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制

ListItem Slots

名称	说明
header	左/上内容插槽，可完全自定义默认显示
body	中间内容插槽，可完全自定义中间内容
footer	右/下内容插槽，可完全自定义右侧内容

通过插槽扩展 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 如果 uni-list-item 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 uni-list-item提供了3个可扩展的插槽：header、body、footer

• 当 direction 属性为 row 时表示水平排列，此时 header 表示列表的左边部分，body 表示列表的中间部分，footer 表示列表的右边部分
• 当 direction 属性为 column 时表示垂直排列，此时 header 表示列表的上边部分，body 表示列表的中间部分，footer 表示列表的下边部分 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。

<!-- F4: 社区活动 -->
<uni-card class="card" title="| 社区活动" is-full padding="0"><!-- clickable：是否允许列表项被点击，如果允许则自动添加点击反馈 --><!-- link：是否允许列表项显示为链接，如果允许则自动添加点击反馈 + 添加向右的箭头 --><uni-list><uni-list-item class="activity-item" v-for="(a,i) in activities" :key="i"><!-- 列表项中央主体插槽内容 --><template v-slot:body><view class="activity-body"><text class="title">{{a.title}}</text><text class="content">{{a.content}}</text><!-- 通过管道(|)把数据传递给过滤器 --><text class="time">{{a.startTime | datetime}}</text></view></template><!-- 列表项右侧插槽内容 --><template v-slot:footer><image class="pic" :src="base+a.pic" mode="widthFix"/></template></uni-list-item></uni-list>
</uni-card>

uni.scss

CSS中如何实现“文本在一行中显示，如果有溢出，则使用省略号代替”？

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

/* 自定义的样式混入 */
@mixin ellipsis-1 {white-space: nowrap;		//文本在空白处不换行overflow: hidden;			//内容溢出的话则隐藏text-overflow: ellipsis;	//如果发生文本溢出则用省略号代替
}
@mixin ellipsis-2 {}
@mixin ellipsis-3 {}

.activity-item {align-items: center;//弹性容器中的子元素交叉轴上居中对齐.activity-body {flex-direction: column;width: 420rpx; //父元素指定宽度，子元素就可能显示省略号.title {font-size: $uni-font-size-base - 1;@include ellipsis-1;}.content {font-size: $uni-font-size-sm; color:$uni-text-color-grey;@include ellipsis-1;}.time {font-size: $uni-font-size-sm; color:$uni-text-color-grey;}}.pic {width:240rpx;flex-shrink: 0;//弹性子元素尺寸收缩权重： 0 —— 参与尺寸缩小}
}

过滤器

main.js

import App from './App'// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
//声明全局过滤器——可供所有的页面/组件使用
Vue.filter('datetime', (num)=>{//参数是数字——时间戳，返回日期时间字符串let d = new Date(num)  //把时间戳转换为日期对象//获取Date中的不同部分let yy = d.getFullYear()let mm = d.getMonth() + 1   //注意：默认的月份是0~11mm = mm<10 ? '0'+mm : mmlet dd = d.getDate()dd = dd<10 ? '0'+dd : ddlet hh = d.getHours()hh = hh<10 ? '0'+hh : hhlet mi = d.getMinutes()mi = mi<10 ? '0'+mi : mireturn `${yy}-${mm}-${dd} ${hh}:${mi}`
})App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif

缴费列表页面开发

property-fee.vue

标题栏开发

<template><view class="content"><!-- F1：自定义标题栏 --><uni-nav-bar class="nav-bar" left-icon="back" left-text="返回" right-icon="list" title="缴 费" background-color="#090" color="#fff" @clickLeft="back" @clickRight="jump('/pages/feeRecord/feeRecord')"></uni-nav-bar><!-- F2：累积费用统计 --><!-- F3：分列各项费用的列表 --></view>
</template>

<script>export default {data() {return {}},methods: {//处理“导航条左侧按钮”被单击事件back(){uni.navigateBack()},//处理“导航条右侧按钮”被单击事件jump(url){uni.navigateTo({ url })},}}
</script>

<style scoped lang="scss">
.nav-bar {display: block;//让父组件中的样式可以穿透到子组件::v-deep  .uni-navbar__content {	display: block;}
}
</style>

样式穿透

Vue.js / uni-app经典面试题：样式穿透是什么？

设法让父组件因为使用scoped属性产生的data-v-随机数 属性在所有的子组件体内元素上也生成一份，这样一来父组件的样式就可以应用到子组件内 —— 样式穿透：让父组件内编写的样式可以作用到子组件内。实现方法：

CSS： >>> 选择器 { }

Less： /deep/ 选择器 { }

SCSS： ::v-deep 选择器 { }

页面 parent.vue

<template><view class="p1">PARENT1<view class="p2">PARENT2</view><!-- 使用子组件 --><zh-child/></view>
</template><style scoped lang="scss">
.p1 {font-size: 1.5em;font-weight: bold;
}
.p2 {font-style: italic;
}
.c1 {color: red;
}
>>>  .c2 {text-decoration: line-through;
}
</style>

组件 zh-child.vue

<template><view class="c1">CHILD1<view class="c2">CHILD2</view></view>
</template><style scoped lang="scss"></style>

累积费用统计开发

<!-- F2：累积费用统计 -->
<view class="fee-statistics"><text class="hint">当前待缴费用(元)</text><text class="amount">￥{{amount}}</text>
</view>

.fee-statistics {background-color: $zh-theme-color;border-top: $uni-border;padding: $uni-spacing-col-lg*3  0;flex-direction: column; //弹性容器的主轴方向：纵向align-items: center; //弹性容器中的子元素在交叉轴上居中对齐color: $uni-text-color-inverse;.hint {font-size: $uni-font-size-lg; margin-bottom: $uni-spacing-col-base;}.amount { font-size: $uni-font-size-base * 2.5;font-weight: bold;}
}

各项费用的列表开发

<!-- F3：分列各项费用的列表 -->
<!-- thumb：有时也称为thumbnail，拇指图/缩略图 -->
<!-- thumbSize：缩略图大小，只能选择 sm/base/lg 之一 -->
<!-- link：列表选项显示为链接效果：点击后有反馈+可以点击+右侧箭头 -->
<!-- rightText：显示在右侧的文字 -->
<!-- Math.abs()：返回数字的绝对值 -->
<uni-list><uni-list-item title="水费" thumb="../../static/img/shui.png" thumbSize="lg" link :rightText="fees.shui>=0 ? '' : `待缴金额：￥${Math.abs(fees.shui)}`" to="/pages/feePay/feePay?type=1"/><uni-list-item title="电费" thumb="../../static/img/dian.png" thumbSize="lg" link :rightText="fees.dian>=0 ? '' : `待缴金额：￥${Math.abs(fees.dian)}`" to="/pages/feePay/feePay?type=2"/><uni-list-item title="燃气费" thumb="../../static/img/ranqi.png" thumbSize="lg" link :rightText="fees.ranqi>=0 ? '' : `待缴金额：￥${Math.abs(fees.ranqi)}`" to="/pages/feePay/feePay?type=3"/><uni-list-item title="物业费" thumb="../../static/img/wuye.png" thumbSize="lg" link :rightText="fees.wuye>=0 ? '' : `待缴金额：￥${Math.abs(fees.wuye)}`" to="/pages/feePay/feePay?type=4"/><uni-list-item title="停车费" thumb="../../static/img/tingche.png" thumbSize="lg" link :rightText="fees.tingche>=0 ? '' : `待缴金额：￥${Math.abs(fees.tingche)}`" to="/pages/feePay/feePay?type=5"/><uni-list-item title="宽带费" thumb="../../static/img/kuandai.png" thumbSize="lg" link :rightText="fees.kuandai>=0 ? '' : `待缴金额：￥${Math.abs(fees.kuandai)}`" to="/pages/feePay/feePay?type=6"/>
</uni-list>

<script>import { feeList } from '@/service'export default {data() {return {fees: {},	//待缴费用}},//生命周期方法 —— 页面挂载完成时async onLoad(){//异步请求当前登录用户的待缴费用let data = await feeList()this.fees = data},//计算属性computed: {amount(){let sum = 0;sum = this.fees.shui<0 ? sum+this.fees.shui : sumsum = this.fees.dian<0 ? sum+this.fees.dian : sumsum = this.fees.ranqi<0 ? sum+this.fees.ranqi : sumsum = this.fees.tingche<0 ? sum+this.fees.tingche : sumsum = this.fees.wuye<0 ? sum+this.fees.wuye : sumsum = this.fees.kuandai<0 ? sum+this.fees.kuandai : sum//先求数字的绝对值，再保留指定长度的小数位return Math.abs(sum).toFixed(2)}},methods: {//处理“导航条左侧按钮”被单击事件back(){uni.navigateBack()},//处理“导航条右侧按钮”被单击事件jump(url){uni.navigateTo({ url })},}}
</script>

/*** API-3.1、当前登录用户各项待缴费金额汇总* 接口地址：fee/list* 请求方式：GET* 请求头部：token - 用户登录后保存在客户端的身份凭证*/
export let feeList = async ( )=>{//1.准备请求URLlet url = base + 'fee/list'//2.显示“加载中”提示框	uni.showLoading({title: '缴费数据读取中'})//3.发起异步请求消息let [err, res] = await uni.request({url,		//请求地址header: {	//请求头部-token(客户端身份令牌)token: uni.getStorageSync('userToken')}})//4.隐藏“加载中”提示框uni.hideLoading()//5.返回响应消息主体return res.data
}