uniapp学习(一)
【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=24&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1
1.scroll-view
竖着的话要给容器加固定高度
横着需要给盛东西的那个view（在这里是group）加上css样式，white-space: nowrap;
<template>
<view>
<scroll-view scroll-x="true" scroll-y class="scroll">
<view class="group">
<view class="item">111</view>
<view class="item">222</view>
<view class="item">333</view>
<view class="item">444</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.scroll{
box-sizing: border-box;
border: 1px solid greenyellow;
height: 220px;
.group{
white-space: nowrap;
.item{
height: 300px;
width: 750rpx;
background-color: powderblue;
border: 1px solid red;
display: inline-block;
}
}
}
</style>
2.swiper
<template>
<view>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
circular
indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="rgba(255,255,255,1)"
class="hi">
<swiper-item>
<view class="swiper-item">a</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">b</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.hi{
box-sizing: border-box;
height: 250rpx;
width: 750rpx;
.swiper-item{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
width: 100%;
background-color: thistle;
}
}
</style>
image
vue
data属性
<template>
<view>
<view class="">
当前标题：{{title}}
</view>
<view class="">
123
</view>
<view class="">{{arr}}</view>
<view class="">{{arr[0]}}</view>
<view class="">{{obj}}</view>
<view class="">{{obj.name}}</view>
</view>
</template>
<script>
export default {
data() {
return {
title:"微信小程序",
num:123,
arr:["aaa","bbb","ccc"],
obj:{
name:"zhangSan",
age:22
}
}
},
methods: {
}
}
</script>
<style>
</style>
条件渲染
v-if
<template>
<view>
<view v-if="state">显示</view>
<view v-if="notshow">显示</view>
<view v-if="notshow">假如不显示</view>
<view v-else>显示这个</view>
<view v-if="day=='周一' ">周一</view>
<view v-else-if="day=='周二'">周二</view>
<view class="" v-else>周末吗</view>
</view>
</template>
<script>
export default {
data() {
return {
state:true,
notshow:false,
day:"周一"
}
},
methods: {
}
}
</script>
<style>
</style>
v-show
<view v-show="state">hello</view>
<view v-show="!state">world</view>
小区别
- v-if把不显示的元素原地蒸发
- v-show是使用了css的display= none
v-for
(v-bind：key 简写成：key)
<template>
<view>
<view v-for="item in user" :key="index">
<view class="">{{item.name}}+{{item.age}}</view>
</view>
<view v-for="(item,index) in arr" :key="index">
<view >{{(index+1)+"-"+item }}</view>
</view>
<view v-for="(value,name,index) in obj" :key="index">
<view >{{index}}--{{ name}}:{{value}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr:["aaa","bbb","ccc"],
obj:{
name:"zhangSan",
age:22
},
user:[
{
name:"张三",
age:20
},
{
name:"李四",
age:21
}
]
}
},
methods: {
}
}
</script>
<style>
</style>
其他指令
v-html
<template>
<view>
<view>{{title}}</view>
<view v-html="title"></view>
-----------------------------------------
<view>{{code}}</view>
<view v-html="code"></view>
</view>
</template>
<script>
export default {
data() {
return {
code:"<h1>hello world</h1>",
title:"微信小程序"
}
},
methods: {
}
}
</script>
<style></style>
v-bind
动态属性绑定
<template>
<view>
<image v-bind:src="imgSrc"
mode=""
></image>
<!-- 简写 -->
<image :src="imgSrc"
mode=""
></image>
<!-- 循环 -->
<image :src="`../../static/images/pic${item}.jpg`"
v-for="item in [1,2,3]"
></image>
</view>
</template>
<script>
export default {
data() {
return {
imgSrc:"../../static/logo.png",
}
},
methods: {
}
}
</script>
<style>
</style>
v-on
事件触发
<template>
<view>
<!-- v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件 -->
<!-- 完整语法 -->
<view v-on:click="doSomething">{{title}}</view>
<!-- 缩写 -->
<view @click="returnOrigin">{{title}}</view>
<button @click="addNum">{{num}}</button>
</view>
</template>
<script>
export default {
data() {
return {
title:"(｡･∀･)ﾉﾞ嗨",
num:0
}
},
methods: {
doSomething(){
this.title ="┗|｀O′|┛ 嗷~~"
},
returnOrigin(){
this.title="(｡･∀･)ﾉﾞ嗨"
},
addNum(){
this.num = this.num+1
}
}
}
</script>
<style>
</style>
class和style的绑定
style
<template>
<view>
<view class="box"
:style="{background:'blue'}"
>
</view>
<view class="box"
:style="{background:bgcolor}"
@click="clickBg"
>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgcolor:"yellow"
}
},
methods: {
doSomething(){
this.title ="┗|｀O′|┛ 嗷~~"
},
returnOrigin(){
this.title="(｡･∀･)ﾉﾞ嗨"
},
addNum(){
this.num = this.num+1
},
clickBg(){
// 也可以在data里面写个变量点击后改变data里面的变量然后v-bind给style
let r = Math.random()*255
let g = Math.random()*255
let b = Math.random()*255
this.bgcolor = "rgb("+r+","+g+","+b+")"
}
}
}
</script>
<style>
.box{
height: 200rpx;
width: 750rpx;
border: 1px solid black;
background-color: pink;
}
</style>
Class 与 Style 绑定
<template>
<view>
<view class="block"
:class="{activeBlock:ifactive}"
@click="changeActive"
></view>
<view class="block"
:class="ifactive ? 'activeBlock' :' ' "
@click="changeActive"
>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ifactive: false
}
},
methods: {
changeActive(){
this.ifactive = !this.ifactive
}
}
}
</script>
<style>
.block{
width: 100%;
height: 250rpx;
background-color: darkgray;
border: 1px solid black;
}
.activeBlock{
background-color: lightcyan;
}
</style>
案例 点击导航高亮显示
<template>
<view>
<view class="nav">
<view class="item"
:class="navIndex==index ? 'active': ' ' "
v-for="(item,index) in navArr"
:key="index"
@click="highLight(index)">
{{item}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navArr:[
"第一项",
"第二项",
"第三项",
"第四项",
"第wu项",
],
navIndex:-1
}
},
methods: {
highLight(index){
this.navIndex = index
}
}
}
</script>
<style lang="scss">
.nav{
display: flex;
justify-content: space-around;
align-items:center;
}
.item{
flex: 1;
line-height: 90rpx;
background-color: aliceblue;
text-align: center;
&.active{
background-color: greenyellow;
color: white;
}
}
// css写法，上面那个 &是scss写法
// .item.active{
// background-color: greenyellow;
// }
// }
</style>
v-model
<template>
<view>
<view class="" @click="clickChange">标题：{{title}}</view>
<input type="text" v-model="title">
</view>
</template>
<script>
export default {
data() {
return {
title:"(｡･∀･)ﾉﾞ嗨"
}
},
methods: {
clickChange(){
this.title = "┗|｀O′|┛ 嗷~~"
}
}
}
</script>
<style lang="scss">
input{
border: 1px solid #ccc;
}
</style>
小案例表单提交-双向绑定
（选择器一类的是无法用v-model进行双向绑定的，需要使用组件。就是这种也能用，但是。。。不能配合其他组件。就是个案例意思意思。配合组件的在下一个）
<template>
<view>
<view class="out">
<view class="row">
<input type="text" placeholder="用户名" class="border"
v-model="message.username"
>
</view>
<view class="row">
<input type="text" placeholder="电话" class="border"
v-model="message.tel"
>
</view>
<view class="row">
<textarea name="" id="" cols="30" rows="10" placeholder="请输入留言内容"
class="border"
v-model="message.content"
></textarea>
</view>
<view class="row">
<button type="primary"
@click="submitMessage"
>提交</button>
</view>
</view>
<view class="">
{{message}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
message:{
username:"",
tel:"",
content:""
}
}
},
methods: {
submitMessage(){
}
}
}
</script>
<style lang="scss">
.out{
padding: 30rpx;
.row{
margin-bottom: 10rpx;
}
.border{
border:1px solid #eee;
width: 100%;
min-height: 80rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
}
</style>
模拟真实表单提交，详细介绍表单组件
① 提交按钮（button）需要属性 form-type="submit"
② 输入的组件添加属性 name
③ form 添加事件 @submit="abc"，在methods里通过abc(e)来获取表单内容
<template>
<view>
<form class="out" @submit="sub">
<view class="row">
<input type="text" name="username">
</view>
<view class="row">
<textarea name="content" id="" cols="30" rows="10"></textarea>
</view>
<view class="row">
<radio-group name="gender">
<label>
<radio value="0" /><text>男</text>
</label>
<label>
<radio value="1" /><text>女</text>
</label>
<label>
<radio value="2" /><text>保密</text>
</label>
</radio-group>
</view>
<view class="row">
<!-- mode="" :range="" @change="" -->
<picker mode="selector" :range="options" name="school"
:value="selectSchool"
@change="changeSchool"
>
<view>点击选择学历：{{options[selectSchool]}}</view>
</picker>
</view>
<view class="row">
<button type="primary" form-type="submit">提交表单</button>
<button type="primary"
form-type="reset"
>重置</button>
</view>
</form>
<view class="">
{{obj}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
obj:null,
options:["高中","大专","本科","硕士","博士"],
selectSchool:0,
}
},
methods: {
sub(e){
this.obj = e.detail.value
this.obj.school = this.options[this.selectSchool]
},
changeSchool(e){
this.selectSchool = e.detail.value
}
}
}
</script>
<style lang="scss">
.out{
padding: 30rpx;
.row{
margin-bottom: 10rpx;
border:1px solid #eee;
width: 100%;
min-height: 80rpx;
// padding: 0 20rpx;
box-sizing: border-box;
}
}
</style>
计算属性
<template>
<view>
<input type="text" v-model="title">
<view>
原标题：{{title}}
</view>
<view>
修改后：{{changeTitle}}
</view>
<view>
{{demo}}
</view>
<view>
{{fun()}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title:"",
text:"hello world"
}
},
methods: {
fun(){
return "vue学习"
}
},
// 计算属性 动态计算 优化性能
computed:{
demo(){
return "(｡･∀･)ﾉﾞ嗨 "+this.text
},
changeTitle(){
return this.title.toUpperCase()
}
}
}
</script>
<style lang="scss">
input{
border: 1px solid #eee;
}
</style>
uniapp学习(一)的更多相关文章
- uni-app学习（四）好用的插件2
1. uni-app学习(四)好用的插件2 1.1. 树形结构 点击这里 1.2. 下拉刷新上拉加载组件 如果想把下拉上拉做成自定义的,更加好看,可以使用这个插件 地址这里 举个例子 1.3. 浮动键 ...
- uni-app学习（三）好用的插件1
1. uni-app学习(三) 1.1. async/await使用 表示异步处理,可使用then函数继续操作,返回的是Promise async function timeout() { retur ...
- uni-app学习（五）好用的插件3
1. uni-app学习(五)好用的插件3 1.1. 分享推广页面 分享推广页面,分享第三方.保存二维码.复制推广地址 模板地址 示例 这个用到的几率还是蛮大的,可以直接拿来修改下用 1.2. 教育A ...
- uni-app学习（六）好用的插件4
1. uni-app学习(六)好用的插件4 1.1. QQ音乐模板 点击这里 示例 1.2. 画廊(ynGallery)组件 点击这里 看起来不错的 示例 1.3. 评价模板 学到个动画用法 imag ...
- uni-app学习（二）
1. uni-app学习(二) 1.1. 好用css记录 一定透明度的背景色background: rgba(255,255,255,.6); 1.2. 好用的代码段 store(用户登录) expo ...
- uni-app学习心得和填坑，关于uni-app 打包h5 页面的坑
第一次使用博客园写博客 1.我写博客的原因,梳理知识,整理思路,好记性不如烂笔头做个记录吧!记录生活! 1.了解 大概在我使用hbuilder的时候,在官网浏览下载的hbuilder时候无意中发现了u ...
- uni-app学习
1. 学习uni-app 1.1. 概述 号称一次编写多端运行的前端框架,架构图如下 对某些不同平台的特殊功能,可以通过条件进行自动编译,也就是写两套代码,不同的环境会选择不同代码编译 1.2. 推荐 ...
- uni-app学习资料整理-1.白话uni-app
白话uni-app https://ask.dcloud.net.cn/article/35657 文件内代码架构的变化 以前一个html大节点,里面有script和style节点: 现在templ ...
- uni-app学习记录01-pages配置项
{ // 每个页面都需要在pages里面去声明配置 "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/coll ...
- UniApp学习-多端兼容 & 跨域
多端兼容配置 标签 <!-- 一般标签 --> body ---- page div,ul, li, table,tr,td ---- view span,b,i,font ---- te ...
随机推荐
- js开发规范
####################### 1.缩进 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. [强制] switch中缩进2个空格 [强制] 要求分 ...
- 如何优雅的申请一个属于自己的ChatGPT账号
前言 GPT-4是一种语言模型,是基于GPT-3推出的下一代自然语言处理模型.与之前的GPT模型一样,GPT-4是一种基于深度学习技术的神经网络模型,可以自动地生成人类水平的文本.回答问题.完成翻译任 ...
- Kubernetes客户端认证——基于CA证书的双向认证方式
1.Kubernetes 认证方式 Kubernetes集群的访问权限控制由API Server负责,API Server的访问权限控制由身份验证(Authentication).授权(Authori ...
- Kubernetes学习之旅
# Kubernetes学习之旅 ## 引言 - 为什么选择Kubernetes- Kubernetes简介- Kubernetes的发展历程 ## Kubernetes基本概念 - 节点(Node) ...
- mysql数据库的登录脚本
######################## ku脚本: 可以使用以下ku脚本,它可以根据提供的参数登录到MySQL数据库: #!/bin/bash # Check for correct num ...
- Spring中事务嵌套这么用一定得注意了！！
前言 最近项目上有一个使用事务相对复杂的业务场景报错了.在绝大多数情况下,都是风平浪静,没有问题.其实内在暗流涌动,在有些异常情况下就会报错,这种偶然性的问题很有可能就会在暴露到生产上造成事故,那究竟 ...
- MKL稀疏矩阵运算示例及函数封装
Intel MKL库提供了大量优化程度高.效率快的稀疏矩阵算法,使用MKL库的将大型矩阵进行稀疏表示后,利用稀疏矩阵运算可大量节省计算时间和空间,但由于MKL中的原生API接口繁杂,因此将常用函数封装 ...
- P7603 [THUPC2021] 鬼街（减半警报器模板）
P7603 [THUPC2021] 鬼街(减半警报器模板) 前言 这是一个由 lxl 大佬提出的神奇 trick,第一次省选集训的时候有点颓,听完了没写.刚好明天又要讲这个不如写篇题解. 还是,我太弱 ...
- 快速求popcount的和
前置知识 \(\text{popcount}(n)\) 表示将 \(n\) 转为二进制后的数中 \(1\) 的个数. 结论 \[\sum_{i=1}^{n} \text{ popcount}(i)=\ ...
- 一站式统一返回值封装、异常处理、异常错误码解决方案—最强的Sping Boot接口优雅响应处理器
作者:京东物流 覃玉杰 1. 简介 Graceful Response是一个Spring Boot体系下的优雅响应处理器,提供一站式统一返回值封装.异常处理.异常错误码等功能. 使用Graceful ...