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 ...
随机推荐
- Dotnet初探: 尝试使用 dotnet6 的miniapi
引子 最近我们学校要求我们使用dotnet实现一个登录功能,由于我们学校的教程老旧(万年经典asp .net 4.x,慢的要死),我看有高性能又免费的Dotnet6不用,还又要退回几年前,于是决定另开 ...
- 新员工入职，前端基础环境变量的配置！node、nvm、vue-cli的安装和下载
1.安装nvm及配置 首先下载nvm不要下载node,如果电脑已经有node的话需要卸载node,并使用命令提示符来查看node的位置(where node)手动删除 nvm下载链接:https:// ...
- Nuxt3环境变量配置
Nuxt3 正式发布还不到半年,在投入生产环境使用后,遇到了不少问题,很难找到合适的解决方案,其中环境变量配置就是其中一个,之前一直未能解决,最近要上持续集成,无法绕过这个问题,所以花了点时间研究了一 ...
- HTML中script 标签中的那些属性
在HTML中, <script> 标签用于嵌入或引用JavaScript代码. 在 <script> 标签中,有两个属性可以用来控制脚本的加载和执行方式: async 和 de ...
- Python 列表定义
列表定义 由一系列按特定排序排列的元素组成,各元素之间无任何关系 用方括号[]来表示列表,并用逗号分隔其中的元素 访问列表元素 列表是有序集合,访问列表元素时,只需将该元素的位置或索引告知python ...
- [OpenCV-Python] 11 程序性能检测及优化
文章目录 OpenCV-Python: 核心操作 11 程序性能检测及优化 11.1 使用 OpenCV 检测程序效率 11.2 OpenCV 中的默认优化 11.3 在 IPython 中检测程序效 ...
- Python-趣味小程序
1.效果 2.代码 import sys import time def print_act(word): #print('\n'+' '+'\r') #让光标回到行首 sys.stdout.writ ...
- VMware虚拟机---Ubuntu无法连接网络该怎么解决？
在学习使用Linux系统时,由于多数同学们的PC上多是Windows系统,故会选择使用VMware创建一个虚拟机来安装Linux系统进行学习. 安装完成之后,在使用时总是会遇到各种各样的问题.本片随笔 ...
- flink HelloWorld 之词频统计
最近也在跟着学习flink,也是费了一点功夫才把开发环境都搭建了起来,做了一个简单的词频统计的demo- 准备工作 首先我们需要搭建需要的flink开发环境,我这里使用的是IDEA作为我的开发工具,所 ...
- pytes中fixture的scope: 决定可以在什么范围内共享fixture
1fixture的scope 在@pytest.fixture(scope='xxx')中,scope的可选值有5个,以下是官网的描述 2 function级别的scope 添加如下代码到pytest ...