数据请求封装

http.js 网络请求模板

export default function $http(options) {const {url,data} = optionsreturn new Promise((reslove, reject) => {uniCloud.callFunction({name: url,data}).then((res) => {if (res.result.code === 200) {reslove(res.result)} else {reject(res.result)}}).catch((err) => {reject(err)})})
}

list.js 运用$http实现具体函数功能

import $http from "../http.js"
export const get_label = (data) => {return $http({url:'get_label',data})
}

index.js 批量导出文件

// import {//  get_label,
//  get_list
// } from "./list.js"
// export default {//  get_label,
//  get_list
// }      每次增加一个函数就要在此文件中添加文件名，改进：// 批量导出文件
const requireApi = require.context(// api 文件的相对路经'.',// 是否查询子目录false,// 查询文件的后缀  /.js$/
)
let module={}
requireApi.keys().forEach((key,index)=>{if(key==="./index.js"){return}console.log(key)Object.assign(module,requireApi(key))
})
export default module

main.js 定义vue实例$api

import Vue from 'vue'
import App from './App'
import api from './common/api'Vue.config.productionTip = false
Vue.prototype.$api=apiApp.mpType = 'app'const app = new Vue({...App
})
app.$mount()

index.vue 使用$api调用函数

methods: {getLabel() {console.log("this.$api", this.$api)this.$api.get_label({name: "get_label"}).then((res) => {console.log("get_label数据",res)const {data} = resthis.tabList = data})}}

文字溢出隐藏

限制在一个块元素显示的文本的行数。
-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

text {// 超过2行省略overflow: hidden;text-overflow: ellipsis;//用...表示省略display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;//从上向下垂直排列子元素。}

多种卡片实现

&.mode-image 这个语句可以实现对基础样式的覆盖
<list-card mode='base'></list-card>对自定义组件传值
<view v-if="mode==='image' " class="listcard mode-image"> 自定义组件根据mode的值显示不同class类样式

*****************页面的运用*********************<!-- 卡片组件 --><list-scoll><list-card mode='base'></list-card><list-card mode='image'></list-card><list-card mode='column'></list-card></list-scoll>

*****************自定义组件*********************
<template><view><!-- 基础卡片 --><view v-if="mode==='base' " class="listcard"><view class="listcard-image"><image src="../../static/logo.png" mode="aspectFill"></image></view><view class="listcard-content"><view class="listcard-content_title"><text>标题</text></view><view class="listcard-content_des"><view class="listcard-content_des-label"><view class="listcard-content_des-label-item">标签1</view><view class="listcard-content_des-label-item">标签2</view></view><view class="listcard-content_des-browse">浏览人数100</view></view></view></view><!-- 多图卡片 --><view v-if="mode==='column' " class="listcard mode-column"><view class="listcard-content"><view class="listcard-content_title"><text>标题</text></view><view class="listcard-image"><view class="listcard-image_item" v-for="item in 3" :key="item"><image src="../../static/logo.png" mode="aspectFill"></image></view></view><view class="listcard-content_des"><view class="listcard-content_des-label"><view class="listcard-content_des-label-item">标签1</view><view class="listcard-content_des-label-item">标签2</view></view><view class="listcard-content_des-browse">浏览人数100</view></view></view></view><!-- 大图模式 --><view v-if="mode==='image' " class="listcard mode-image"><view class="listcard-image "><image src="../../static/logo.png" mode="aspectFill"></image></view><view class="listcard-content"><view class="listcard-content_title"><text>标题</text></view><view class="listcard-content_des"><view class="listcard-content_des-label"><view class="listcard-content_des-label-item">标签1</view><view class="listcard-content_des-label-item">标签2</view></view><view class="listcard-content_des-browse">浏览人数100</view></view></view></view></view>
</template><script>export default {//**************接收页面传来的数据***********************props:{mode:{type:String,default:'base'}},//******************************************************data() {return {};}}
</script><style lang="scss">
//**************基础卡片样式***************************.listcard {display: flex;padding: 10px;margin: 10px;border-radius: 5px;box-sizing: border-box;box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);.listcard-image {flex-shrink: 0;width: 60px;height: 60px;border-radius: 5px;overflow: hidden;image {width: 100%;height: 100%;}}.listcard-content {display: flex;justify-content: space-between;flex-direction: column;padding-left: 10px;width: 100%;.listcard-content_title {font-size: 14px;color: #333333;font-weight: 400;line-height: 1.2;text {// 超过2行省略overflow: hidden;text-overflow: ellipsis; //用...表示省略display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; //从上向下垂直排列子元素。}}.listcard-content_des {display: flex;justify-content: space-between;font-size: 12px;.listcard-content_des-label {display: flex;.listcard-content_des-label-item {border-radius: 15px;color: $mk-base-color;border: 1px $mk-base-color solid;padding: 0 5px;margin-right: 5px;}}.listcard-content_des-browse {color: #999999;line-height: 1.5;}}}//*****************基于基础卡片样式进行部分修改得到多图卡片样式*********************&.mode-column {.listcard-content {width: 100%;padding-left: 0;}.listcard-image {height: 70px;width: 100%;margin-top: 10px;display: flex;.listcard-image_item {margin-left: 10px;border-radius: 5px;width: 100%;overflow: hidden;&:first-child {margin-left: 0;}image {width: 100%;height: 100%;}}}.listcard-content_des {margin-top: 10px;}}
//**************基于多图卡片样式进行部分修改得到大图卡片样式***********************&.mode-image {flex-direction: column;.listcard-image {width: 100%;height: 100px;}.listcard-content {padding-left: 0;margin-top: 10px;.listcard-content_des{display: flex;margin-top: 10px;align-items: center;}}}}
</style>

uni-app学习笔记4相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
得到app文稿导出_得到app学习笔记作为知识付费者，如何把所学内容快速输出？...
原标题:得到app学习笔记作为知识付费者,如何把所学内容快速输出? 零.引子昨天看到老公票圈更新了一条段子: 我就是那个伪勤奋者,在知识焦虑的胁迫下,这些年买了不知多少视频.微课.教程还有得到专栏. ...
Flutter高级进阶实战仿哔哩哔哩APP学习笔记
Flutter高级进阶实战仿哔哩哔哩APP学习笔记近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...
鸿蒙app学习笔记一
前言鸿蒙app开发基础知识鸿蒙应用程序 HAP entry feature pack.info 库文件资源文件配置文件(config.json) HAR Node.js NPM 关于DevEc ...
Windows 8 Metro App学习笔记(九)—磁砖
瓷砖,即桌面显示的Tile,它的创建和生命周期都可以由用户自由创建并可以直接访问一个应用程序,还可以为信息的及时推送带来很多的方便.在Windows 8中,由SecondaryTile对象负责. 首先 ...
【跨端应用】—— uniapp黑马商城App学习笔记（二）
一.设置微信小程序调试 HBuilderX点击[工具] --[设置]--[运行配置],找到[微信web开发者工具]安装所在的文件夹. 复制路径,填写到[小程序运行配置]-- [微信开发者工具路径] 先 ...
英飞凌 DAVE™ 4.1.2 SDK 开发app学习笔记——什么是DAVE APP？
第一天: 在笔者前期使用Dave3开发infineon单片机时发现,Dave可以通过建立dave ce project 加载APP来自动生成主程序及各部分外设的驱动代码,可视化地配置你选用的单片机及各 ...
apcloud混合式开发app学习笔记
修改图标新建项目检出到本地 -------------------------- 1.api.ajax var loginName = $api.val($api.byId('uname')); ...
高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记文件结构添加插件构建准备各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
Python学习笔记：Day 16 编写移动App
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...

uni-app学习笔记4

数据请求封装

http.js 网络请求模板

list.js 运用$http实现具体函数功能

index.js 批量导出文件

main.js 定义vue实例$api

index.vue 使用$api调用函数

文字溢出隐藏

多种卡片实现

uni-app学习笔记4相关推荐

最新文章

热门文章