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 ...
随机推荐
- IDA 特征码生成和搜索脚本
最近比较忙,就少写两句,直接附上源代码,其中的细节点就不再赘述,如有疑问,请留言. 一共就是实现了两个函数,一个用于搜索特征码 (SearchPattern),一个用于生成特征码 (GenerateF ...
- Springboot集成MongoDB存储文件、读取文件
一.前言和开发环境及配置 可以转载,但请注明出处. 之前自己写的SpringBoot整合MongoDB的聚合查询操作,感兴趣的可以点击查阅. https://www.cnblogs.com/zaoyu ...
- MySQL(一)Linux下MySQL的安装
Linux下MySQL的安装 1 MySQL的安装 1.1 Linux系统以及工具的准备 这里使用两台CentOS7虚拟机,一台安装8.0版本,另一台克隆的虚拟机安装5.7版本 克隆的虚拟机需要进行配 ...
- Linux云计算运维工程师day28shell编程基础
一. 1.全局变量.环境变量 Export OLDOBY="I am a oldboy." Echo OLDOBY OLDOBY="I am a oldboy.&quo ...
- PowerBI(一) : 如何将powerBI报表嵌入内部web应用程序?
最近做了一个PowerBI报表嵌入内部web应用系统的项目,分享一下主要步骤以及踩坑记录. 微软官网完整教程这里:https://learn.microsoft.com/zh-cn/power-bi/ ...
- 【Azure API 管理】APIM如何实现对部分固定IP进行访问次数限制呢?如60秒10次请求
问题描述 使用Azure API Management, 想对一些固定的IP地址进行访问次数的限制,如被限制的IP地址一分钟可以访问10次,而不被限制的IP地址则可以无限访问? ChatGPT 解答 ...
- vue3.0
https://www.yuque.com/gdnnth/vue-v3 http://www.liulongbin.top:8085/#/ https://www.yuque.com/woniuppp ...
- Java中数字相关的类有哪些?Nuber数字类和Math数学类详解
前言 我们在解决实际问题时,会经常对数字.日期和系统设置进行处理,比如在我们的代码中,经常会遇到一些数字&数学问题.随机数问题.日期问题和系统设置问题等. 为了解决这些问题,Java给我们提供 ...
- uni-app介绍
"优你"框架 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/ ...
- Linux修改Python软链接
Linux修改python软链接 0. 适用场景及基础知识 适用场景: 有些自带的是python3命令,嫌输入太麻烦,可以修改成python命令 有些自带是python是python2,想修改成pyt ...