Uniapp笔记（二）uniapp语法1

一、本节项目预备知识

1、效果演示

2、常见组件

1、view组件

视图容器，它类似于传统html中的div，用于包裹各种元素内容。

2、swiper组件

swiper是滑动视图容器，经常看到的轮播图就是通过它来完成的

swiper-item是swiper子组件，仅能放到swiper组件中

swiper常用属性

属性名类型默认值说明
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#000000当前选中的指示点颜色
autoplayBooleanfalse是否自动切换
currentNumber0当前所在滑块的 index
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
<template><view class="container"><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item><text>1</text></swiper-item><swiper-item><text>2</text></swiper-item><swiper-item><text>3</text></swiper-item></swiper></view>
</template>
<style lang="scss">.swiper{width: 750rpx;height: 300rpx;background-color: #ccc;}
</style>
3、image组件

图片组件的常见属性

属性名类型说明
srcString图片的资源地址
modeString图片裁剪、缩放模式
lazy-loadBoolean图片懒加载

常见的mode值

值含义
scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
<template><view class="container"><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item v-for="(item,index) in swiperList" :key="index"><image :src="item.image_src" mode="widthFix" class="swiper-image"></image></swiper-item></swiper></view>
</template>
<script>export default {data() {return {swiperList:[ {"image_src": "https://api-hmugo-web.itheima.net/pyg/banner1.png","open_type": "navigate","goods_id": 129,"navigator_url": "/pages/goods_detail/main?goods_id=129"},{"image_src": "https://api-hmugo-web.itheima.net/pyg/banner2.png","open_type": "navigate","goods_id": 395,"navigator_url": "/pages/goods_detail/main?goods_id=395"},{"image_src": "https://api-hmugo-web.itheima.net/pyg/banner3.png","open_type": "navigate","goods_id": 38,"navigator_url": "/pages/goods_detail/main?goods_id=38"}]}}}
</script>
<style lang="scss">.swiper{width: 750rpx;height: 300rpx;.swiper-image{width: 100%;height: 100%;}}
</style>

3、网络

3.1、发起请求
uni.request(OBJECT)

OBJECT 参数说明

属性类型必填项说明
urlString是开发者服务器接口地址
dataString/Object/ArrayBuffer否请求的参数
headerObject否设置请求的 header，header 中不能设置 Referer。content-type默认为application/json
methodstring否HTTP 请求方法
dataTypestring否返回的数据格式
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

案例：首页轮播图

export default {data() {return {swiperList:[]}},created() {uni.request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',method:'GET',success:(res) =>{this.swiperList=res.data.message}})}
}
3.2、微信小程序网络
1)、微信小程序网络请求限制

处于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制

  • 只能请求HTTPS类型的接口

  • 必须将接口的域名添加到信任列表中

2)、配置request合法域名

配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项：

  • 域名只支持https协议

  • 域名不能使用IP地址或localhost

  • 域名必须经过ICP备案

  • 服务器域名一个月内最多可申请5次修改

3)、跳过requesth合法域名校验

如果后台程序员仅仅提供了http协议的接口，暂时没有提供https协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启【开发者不校验请求域名、TLS版本及HTTPS证书】选项，跳过request合法域名的校验。

注意：跳过requesth合法域名校验的选项，仅限在开发与调试阶段使用。

3.3、封装uni.reqeust

在src/utils目录下创建request.js

const BASE_URL="https://api-hmugo-web.itheima.net/api/public/v1"
export default{//发送GET请求get:(url,data)=>{return new Promise((resolve,reject)=>{uni.showLoading({title:'网络正在加载中，请稍等'})//发送网路请求uni.request({method:'GET',url:BASE_URL+url,data:data,header:{'Content-Type':'application/json'},success(data) {resolve(data)},fail(err) {reject(err)},complete() {uni.hideLoading() //关闭加载框}})})},//发送POST请求post:(url,data)=>{return new Promise((resolve,reject)=>{uni.showLoading({title:'网络正在加载中，请稍等'})//发送网路请求uni.request({method:'POST',url:BASE_URL+url,data:data,header:{'Content-Type':'application/json'},success(data) {resolve(data)},fail(err) {reject(err)},complete() {uni.hideLoading() //关闭加载框}})})}
}

在main.js中将request.js挂载到全局

import request from '@/utils/request.js'
uni.$api=request

组件中调用

<template><view class="container"><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item v-for="(item,index) in swiperList" :key="index"><image :src="item.image_src" mode="widthFix" class="swiper-image" :lazy-load="true"></image></swiper-item></swiper></view>
</template>
<script>export default {data() {return {swiperList:[]}},methods:{async getSwiperList(){let result=await uni.$api.get('/home/swiperdata')this.swiperList=result.message}},created() {this.getSwiperList()}}
</script>
<style lang="scss">.swiper{width: 750rpx;height: 300rpx;.swiper-image{width: 100%;height: 100%;}}
</style>

二、商城首页

1、首页轮播图

1.1、首页请求轮播图数据

实现步骤

  • 在 data 中定义轮播图的数组

  • 在 created生命周期函数中调用获取轮播图数据的方法

  • 在 methods 中定义获取轮播图数据的方法

export default {data() {return {swiperList:[]}},methods:{async getSwiperList(){let result=await this.$request({url:'/home/swiperdata'})this.swiperList=result.message}},created() {this.getSwiperList()}
}
1.2、自定义轮播图组件
<template><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item v-for="(item,index) in swiperList" :key="index"><image :src="item.image_src" mode="widthFix" class="swiper-image" :lazy-load="true"></image></swiper-item></swiper>
</template><script>export default {props: ['swiperList']}
</script><style lang="scss">.swiper {width: 750rpx;height: 300rpx;.swiper-image {width: 100%;height: 100%;}}
</style>
1.3、首页引用轮播图组件
<template><view><homeSwiper :swiperList="swiperList"></homeSwiper></view>
</template>
<script>import homeSwiper from '@/pages/index/homeSwiper.vue'export default {components:{homeSwiper}}
</script>

2、首页分类导航区域

实现步骤

  • 在 data 中定义首页导航的数组

  • 在 created生命周期函数中调用获取导航数据的方法

  • 在 methods 中定义获取导航数据的方法

2.1、首页请求轮播图数据
export default {data() {return {navList:[]}},methods:{async getNavList(){let result=await this.$request({url:'/home/catitems'})this.navList=result.message}},created() {this.getNavList()}
}
2.2、自定义首页导航组件
<template><view class="nav-list"><view class="nav-item" v-for="(item,index) in navList" :key="index"><image :src="item.image_src" class="nav-item-image"></view></view>
</template><script>export default{props:['navList']}
</script><style lang="scss">.nav-list{display: flex;justify-content: center;margin-top: 50rpx;.nav-item{flex-grow: 1;display: flex;justify-content: center;.nav-item-image{width: 128rpx;height: 140rpx;}}}
</style>
2.3、首页引用导航组件
<template><view><home-nav :navList="navList"></home-nav></view>
</template>
<script>import homeNav from '@/components/homeNav/index.vue'export default {components:{homeNav}}
</script>

3、首页楼层区域

  • 在 data 中定义首页楼层的数组

  • 在 created生命周期函数中调用首页楼层的方法

  • 在 methods 中定义获取首页楼层数据的方法

3.1、首页请求楼层数据
export default {data() {return {floorList:[]}},methods:{async getFloorList(){let result=await this.$request({url:'/home/floordata'})this.floorList=result.message}},created() {this.getFloorList()}
}
3.2、自定义首页楼层组件

  • 渲染楼层中的标题

<template><view class="floor-list"><view class="floor-item" v-for="(item,index) in floorList" :key="index"><view class="floor-title"><image :src="item.floor_title.image_src" class="floor-item-img" mode="widthFix"></image></view></view></view>
</template><script>export default{props:['floorList'],mounted() {console.log('floorList',this.floorListData);}}
</script><style lang="scss">.floor-title{display: flex;margin-top: 30rpx;}
</style>

  • 渲染楼层中的图片

<template><view class="floor-list"><view class="floor-item" v-for="(item,index) in floorList" :key="index"><view class="floor-title"><image :src="item.floor_title.image_src" class="floor-item-img" mode="widthFix"></image></view><view class="floor-img"><view class="floor-left-img"><view class="left-img-box"><image :src="item.product_list[0].image_src" mode="widthFix" class="big-img"></image></view></view><view class="floor-right-img"><view v-for="(subItem,idx) in item.product_list" :key="idx" v-if="idx!=0" class="right-img-box-item"><image :src="subItem.image_src" mode="widthFix" class="small-img"></image></view></view></view></view></view>
</template>
<style>.floor-title{display: flex;margin-top: 30rpx;}.floor-item-img{width: 100%;height: 60rpx;}.floor-img{display: flex;margin-left: 20rpx;}.floor-right-img{display: flex;flex-wrap: wrap;}.big-img{width: 232rpx;}.small-img{width: 233rpx;}
</style>
3.3、首页引用楼层组件
<template><view><home-floor :floorList="floorList"></home-floor></view>
</template>
<script>import homeFloor from '@/components/homeFloor/index.vue'export default {components:{homeFloor}}
</script>

三、商城分类页

1、渲染分类页面的基本结构

<template><view class="container"><scroll-view class="left-scroll-view" scroll-y="true"><view class="left-scroll-view-item active">产品0</view><view v-for="i in 100" class="left-scroll-view-item"><text>产品{{i}}</text></view></scroll-view><scroll-view class="right-scroll-view" scroll-y="true" ><view  v-for="i in 100">xxxxxx</view></scroll-view></view>
</template><script>
</script><style lang="scss">.container{display: flex}.left-scroll-view{width: 240rpx;height: 100vh;.left-scroll-view-item{line-height: 120rpx;background-color: #f7f7f7;text-align: center;}.active{background-color: #fff;position: relative;}.active::before{content: ' ';display: block;position:absolute;width: 10rpx;height: 80rpx;background-color: darkorange;top:50%;transform: translateY(-50%);}}.right-scroll-view{flex-grow: 1;height: 100vh;}
</style>

2、获取分类数据

export default{data(){return{categoryList:[]}},methods:{async getCategoryList(){let result=await this.$request({url:'/categories'})this.categoryList=result.message}},created() {this.getCategoryList()}
}

3、动态渲染左侧的一级分类列表

  • 循环渲染列表结构

<view class="container"><scroll-view class="left-scroll-view" scroll-y="true"><view v-for="(item,index) in categoryList" :key="index" class="left-scroll-view-item"><text>{{item.cat_name}}</text></view></scroll-view>
</view>

  • 在 data 中定义默认选中项的索引

data(){return{active:0}
},

  • 循环渲染结构时，为选中项动态添加 .active 样式

<view v-for="(item,index) in categoryList" :key="index" :class="{'left-scroll-view-item':true,'active':index==active?true:false}"><text>{{item.cat_name}}</text>
</view>

  • 为一级分类的 Item 项绑定点击事件处理函数 activeChanged

<view v-for="(item,index) in categoryList" :key="index" :class="{'left-scroll-view-item':true,'active':index==active?true:false}"@click="activeChange(index)"><text>{{item.cat_name}}</text>
</view>

  • 定义 activeChanged 事件处理函数，动态修改选中项的索引

methods:{activeChange(index){this.active=index}
}

4、动态渲染右侧的二级分类列表

  • 在data中定义二级分类的数据

data() {return {secondCategoryList: []}
},

  • 修改 getCategoryList方法，在请求到数据之后，为二级分类列表数据赋值

async getCategoryList() {let result = await this.$request({url: '/categories'})this.categoryList = result.messagethis.secondCategoryList = result.message[0].children
},

  • 修改 activeChange 方法，在一级分类选中项改变之后，为二级分类列表数据重新赋值

activeChange(index) {this.active = indexthis.secondCategoryList = this.categoryList[index].children
}

  • 循环渲染右侧二级分类列表的 UI 结构：

<scroll-view class="right-scroll-view" scroll-y="true"><view class="cate-lv2" v-for="(item,index) in secondCategoryList" :key="index"><view class="cate-lv2-title"><text>{{item.cat_name}}</text></view></view>
</scroll-view>

  • 样式

.cate-lv2-title {font-size: 12px;font-weight: bold;text-align: center;padding: 15px 0;
}

5、动态渲染右侧的三级分类列表

  • 三级菜单结构

<template><view class="container"><!--左侧栏代码省略--><scroll-view class="right-scroll-view" scroll-y="true"><view class="cate-lv2" v-for="(item,index) in secondCategoryList" :key="index"><view class="cate-lv2-title"><text>{{item.cat_name}}</text></view><!--三级菜单--><view class="cate-lv3-list"><view class="cate-lv3-item" v-for="(subitem,subIndex) in item.children" :key="subIndex"><image :src="subitem.cat_icon" class="item3_img"></image><text>{{subitem.cat_name}}</text></view></view></view></scroll-view></view>
</template>

  • 样式

.cate-lv3-list{display: flex;flex-wrap: wrap;justify-content: center;.cate-lv3-item{flex-grow: 1;display: flex;flex-direction: column;margin: 20rpx;.item3_img{width: 120rpx;height: 120rpx;}}			}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/63555.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

go语言--锁

go语言--锁

锁的基础&#xff0c;go的锁是构建在原子操作和信号锁之上的 原子锁 原子包实现协程的对同一个数据的操作&#xff0c;可以实现原子操作&#xff0c;只能用于简单变量的简单操作&#xff0c;可以把多个操作变成一个操作 sema锁 也叫信号量锁/信号锁 核心是一个uint32值&#…
阅读更多...
Harmony数据存储工具类

Harmony数据存储工具类

使用的是mmkv 1、安装mmkv ohpm install @ohos/mmkv2、封装 import{MMKV, SerializeBase} from @ohos/mmkv/*** 数据存储工具类*/ class MMKVUtil{private filePath:string = private cachePath:string = private mmkv:MMKVprivate mmapID:string="MMKV"construct…
阅读更多...
1018 Public Bike Management 结题记录（dfs剪枝）

1018 Public Bike Management 结题记录（dfs剪枝）

个人觉得直接放入代码是最管用的。 其他方法类似&#xff0c;题意请参考其他博主。 #include <bits/stdc.h> using namespace std; const int N 1e4 50;int maxn 2000000000; int c, n, ed, s[N], m, minlen, needn, backn, pre[N]; bool flag, book[N]; vector<p…
阅读更多...
【Vue3】组件递归

【Vue3】组件递归

【Vue3】组件递归 实现效果 通过传入一个数字&#xff0c;实现数字次循环 父组件 <script setup> import { ref } from "vue"; import RecursionMe from "./components/RecursionMe/index.vue";const level ref(0);const add () > level.val…
阅读更多...
RocketMQ入门

RocketMQ入门

安装 官网 https://rocketmq.apache.org/zh/docs/4.x/introduction/02quickstart 下载 https://archive.apache.org/dist/rocketmq/4.9.4/rocketmq-all-4.9.4-source-release.zip 解压后上传 启动NameServer 修改runserver.sh&#xff0c;分配内存如果比系统高会导致启动…
阅读更多...
【MySQL】基础语法总结

【MySQL】基础语法总结

MySQL 基础语句 一、DDL 数据库定义语言 1.1CREATE 创建 1.1.1 创建数据库 语法结构 CREATE DATABASE database_name;示例 CREATE DATABASE demo;1.1.2 创建表 语法结构 CREATE TABLE 表名 (列1 数据类型,列2 数据类型,... );示例 CREATE TABLE new_user (id INT PRIMARY KE…
阅读更多...
Apifox-比postman更优秀的接口自动化测试平台

Apifox-比postman更优秀的接口自动化测试平台

一、Apifox介绍 Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;定位 Postman Swagger Mock JMeter。通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好 API 文档&#xff0c;API 调试、API 数据 Mock、AP…
阅读更多...
学习使用Scrapy框架进行高效的爬取，了解其基本结构和使用方法

学习使用Scrapy框架进行高效的爬取，了解其基本结构和使用方法

Scrapy是一个用Python编写的开源网络爬虫框架&#xff0c;它可以帮助开发者快速高效地从网页中提取数据。下面是使用Scrapy进行爬取的基本结构和使用方法的概述&#xff1a; 安装Scrapy&#xff1a;首先&#xff0c;确保你已经安装了Python和pip。然后可以通过运行以下命令来安…
阅读更多...
画流程图都可以用哪些工具？

画流程图都可以用哪些工具？

在日常生活中&#xff0c;我相信我们很多人都看到过流程图。对于设计师来说&#xff0c;它还需要涉及流程图来反映用户的旅程和交互方式。那么你知道哪些流行的流程图设计软件呢&#xff1f;作为高级设计师&#xff0c;我今天推荐10款流程图设计软件。你可以和我一起读这篇文章…
阅读更多...
SpringBoot入门教程：Java执行Python脚本文件

SpringBoot入门教程：Java执行Python脚本文件

java执行Python有多种方式，可以使用Java原生API，也可以使用第三方库，使用Java原生的API方式能够支持执行的Python脚本中import第三方依赖。 一：Java @RequestMapping("/exec") public String exec() {try {// args[0]: python, 如果没有配置环境变量需要指定绝…
阅读更多...
微信小程序ios下，border显示不全兼容问题解决

微信小程序ios下，border显示不全兼容问题解决

小程序在ios系统中&#xff0c;如果border小于1px的情况下&#xff0c;border就可能显示不全(可能少了上下左右任意一边) 只需要加一个::after或::before伪类&#xff0c;使用绝对定位定在原来元素上边就不会产生问题了&#xff01; .d_card_line1_tag {padding: 1rpx 14rpx;…
阅读更多...
DEAP库文档教程三-----创建类型

DEAP库文档教程三-----创建类型

本节将继续展示如何通过creator创建类型以及如何使用toolbox如何对复杂问题进行初始化。 Particle的初始化--粒子初始化 一个Particle是另一个特殊类型的个体&#xff0c;这是因为通常情况下它有一个速度&#xff0c;并且有一个最优的位置需要去记忆。这种类型个体的创建与通…
阅读更多...
【实训项目】传道学习助手APP设计

【实训项目】传道学习助手APP设计

1.设计摘要 跨入21世纪以来,伴随着时代的飞速发展&#xff0c;国民对教育的重视度也有了进一步的提升。我们不难发现虽然很多学习内容有学习资料或者答案&#xff0c;但是这些内容并不能达到让所有求学的人对所需知识进行完全地理解与掌握。所以我们需要进行提问与求助。那么一…
阅读更多...
【数学建模套话以及常用数词】——永久更新

【数学建模套话以及常用数词】——永久更新

目录索引 数值词&#xff1a;图与表&#xff1a;套话&#xff1a;注意事项&#xff1a;模型假设&#xff1a;经验积累&#xff1a; 数值词&#xff1a; 方差、均值、差值、百分比率 图与表&#xff1a; 记得画流程图、思维导图记得取消图片的首行缩进后再点击居中 套话&#xf…
阅读更多...
国产自主可控C++工业软件可视化图形架构源码

国产自主可控C++工业软件可视化图形架构源码

关于国产自主代替的问题是当前热点&#xff0c;尤其是工业软件领域。 “一个功能强大的全自主C跨平台图形可视化架构对开发自主可控工业基础软件至关重要&#xff01;” 作为全球领先的C工业基础图形可视化软件提供商&#xff0c;UCanCode软件有自己的思考&#xff0c;我们认…
阅读更多...
学习设计模式之建造者模式，但是宝可梦

学习设计模式之建造者模式，但是宝可梦

前言 作者在准备秋招中&#xff0c;学习设计模式&#xff0c;做点小笔记&#xff0c;用宝可梦为场景举例&#xff0c;有错误欢迎指出。 建造者模式 建造者模式是一种创建型模式&#xff0c;主要针对于某一个类有特别繁杂的属性&#xff0c;并且这些属性中有部分不是必须的。…
阅读更多...
Unity实现倒计时和获取系统时间

Unity实现倒计时和获取系统时间

一：创建UGUI 1.创建Canvas画布组件，调节Canvas画布的分辨率等其他设置。我们可以把视图设置为2D模式下。 2.创建Text文本组件，取名为Timer计时器，我们调整Text文本组件的大小，用锚点设置Text文本组件的位置，并且设置好Text文本组件的颜色。 3.我们再创建一个Text文…
阅读更多...
uniapp 存储base64资源为http链接图片

uniapp 存储base64资源为http链接图片

1. 新建一个base64.js 文件 const fsm wx.getFileSystemManager(); // base64data base64资源 // name 文件名 function base64src(base64data, name, cb) {const time new Date().getTime();const filePath ${wx.env.USER_DATA_PATH}/${name}.${time}.png;const buffer …
阅读更多...
微服务架构｜go-zero 的自适应熔断器

微服务架构｜go-zero 的自适应熔断器

原文链接&#xff1a; go-zero 的自适应熔断器 上篇文章我们介绍了微服务的限流&#xff0c;详细分析了计数器限流和令牌桶限流算法&#xff0c;这篇文章来说说熔断。 熔断和限流还不太一样&#xff0c;限流是控制请求速率&#xff0c;只要还能承受&#xff0c;那么都会处理&…
阅读更多...
网络编程day3-FTP客户端项目

网络编程day3-FTP客户端项目

FTP协议 FTP 的独特的优势同时也是与其它客户服务器程序最大的不同点就在于它在两台通信的主机之间使用了两条 TCP 连接&#xff0c;一条是数据连接&#xff0c;用于数据传送&#xff1b;另一条是控制连接&#xff0c;用于传送控制信息&#xff08;命令和响应&#xff09;&…
阅读更多...
最新文章

Copyright @ 2022~2023