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 ...
随机推荐
- 常用模块time模块
时间模块: 一:time import time time的解析: 时间分为三种格式: 第一种: 第二种: 第三种: 二:datatime import datatime #表达形式 print(d ...
- Python property、setter、deleter
面向对象封装特点之一就是通过实现好的方法来访问,限制对数据的不合理访问,把对象状态私有化,仅供类的内部进行操作 下方示例,Test方法的number属性类实例的时候传递1,number是一个公开属性, ...
- 在.NET 6.0中自定义接口路由
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在本文中,我们将讨论ASP.NET Core中的新路由.我们将了解什么是接口(en ...
- Cmder: 懒癌必备！从此告别记事本记命令的日子
前言 平时开发中遇到这样那样的命令需要记下来,一般做法是这样. 新建记事本 将需要记下的关键命令保存. 每次需要使用时,粘贴复制即可. 好像没什么毛病!直到遇到了 Cmder... 当看到同事分析问题 ...
- Swift CustomStringConvertible 协议的使用
目录 一.前言 二.使用场景 1. 整型类型的枚举使用 2. Class类型的使用 一.前言 先看一下Swift标准库中对CustomStringConvertible协议的定义 public pro ...
- ASP.NET Core设置URLs的几种方法，完美解决.NET 6项目局域网IP地址远程无法访问的问题
近期在dotnet项目中遇到这样的问题:.net6 运行以后无法通过局域网IP地址远程访问.后查阅官方文档.整理出解决问题的五种方式方法,通过新建一个新的WebApi项目演示如下: 说明 操作系统:U ...
- Kubesphere中DevOps流水线无法部署/部署失败
摘要 总算能让devops运行以后,流水线却卡在了deploy这一步.碰到了两个比较大的问题,一个是无法使用k8sp自带的kubeconfig认证去部署:一个是部署好了以后但是没有办法解析镜像名. 版 ...
- Reshaper 代码清理工具
reshaper是个好工具,能帮助我们提升开发效率,比如本文要介绍的全局代码清理功能. 如果你的VS安装了reshaper,可以通过Ctrl+E+C快捷键打开代码清理窗口. 代码清理,可以格式化多种文 ...
- Python if 语句练习
if语句 练习 # 1.以特殊方式跟管理员打招呼 # 创建一个至少包含 5 个用户名的列表,且其中一个用户名为 'admin' .想象你要编写代码,在每位用户登录网站后都打印一条问 # 候消息.遍历用 ...
- [C++提高编程] 1、模板
文章目录 1 模板 1.1 模板的概念 1.2 函数模板 1.2.1 函数模板语法 1.2.2 函数模板注意事项 1.2.3 函数模板案例 1.2.4 普通函数与函数模板的区别 1.2.5 普通函数与 ...