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>