微信小程序学习笔记(7.16)

时间  2020-07-26 标签 微信 程序 学习 笔记 7.16 7 16

事件绑定

相似于web开发中的 onclick，微信开发者工具中使用的 bindtap,bindinput之类的方法，其实都是封装的JavaScripthtml

经过实验探究数据传递方法

写一个input标签能够输入数据，此时input标签绑定一个handleInput JS函数，
咱们往输入框中输入数据，在控制台中返回参数查看参数内容
WXMLpython

<input clss="input" type="text" bindinput="handleInput"></input>

WXSSweb

handleInput:function(e){
 
    console.log(e)
  },

控制台显示
在这里插入图片描述
在这里插入图片描述
因而乎能够判定数据value在detail中，尝试在控制台打印出e.detail.value
在这里插入图片描述
果真输入的事实数据就在 e.detail.value中，此时把num的数值和value同步，那么就能够事实更新数据了。编程

WXML小程序

<input clss="input" type="text" bindinput="handleInput"></input>
<view>{{num}}</view>

JS微信小程序

handleInput:function(e){
 
    console.log(e.detail.value)
    this.setData({
      num:e.detail.value
    })
  },

在这里插入图片描述

微信小程序中的参数传递

<button bindtap="handletap" data-operator="{{1}}">+</button>
<button bindtap="handletap" data-operator="{{-1}}">-</button>
handletap:function(e){
 
    console.log(e)
    
  },

在这里插入图片描述

仍是经过上面的方式在控制台中找一下 定义的data-operator在currentTarget中的dataset里面，为了实现触发+事件让num+1，咱们能够再在handletap
里面写一个dataset，让num与咱们传递的参数operator相加。从长远看这个自定义属性来传递参数让编程变的更加灵活。微信

handletap:function(e){
    var operator=e.currentTarget.dataset.operator;
    this.setData({
      num:this.data.num+operator
    })
    
  },

在这里插入图片描述

样式导入

语法格式
在相应的WXSS文件中写入 @import “相对路径”;网络

惟一能够长按复制的text标签

在text标签中能够设置一些属性，让用户长按复制，也是惟一的一个微信开发标签能够支持这个功能的。
在这里插入图片描述微信开发

image图片标签

1.src指定图片的路径可使本地也能够是网络加载图片(上传图片大小不得超过2M，本地图片最好是用jpg文件，而png是无损无压缩图片格式不推荐使用)图片的默认大小是320X240的大小，个人图片大小是285X183

在这里插入图片描述在这里插入图片描述

2.mode决定图片的内容如何和宽高作适配

scaleToFill 不按照原图像的横纵比例放缩图片，填满image的大

在这里插入图片描述

aspectFit 保持宽高比例，确保图片的长边露出来，经常在页面轮播中使用

在这里插入图片描述

aspectFill 保持宽高比例的，确保图片的短边显示，不常使用

在这里插入图片描述

widthFix 宽度设置了之后，高度按照比例本身调整，经常使用

在这里插入图片描述

bottom 相似于之前的background-positio

3.小程序当中的图片支持懒加载 lazy-load会本身判断当出如今视口上下三屏高度的时候本身开始加载

swiper等比例计算高度的方法

首先去准备一些素材，到天猫上的轮播器找3张图片，copy一下路径，而且咱们能够看到图片的大小是720X296的。如何把每一张图片，按照适合的比例放到个人轮播器里面呢，实际上是有计算公式的
在这里插入图片描述svg

<swiper>
  <swiper-item ><image src="https://aecpm.alicdn.com/simba/img/TB1U5ElLFXXXXavXVXXSutbFXXX.jpg"></image></swiper-item>
  <swiper-item ><image src="//img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"></image></swiper-item>
  <swiper-item ><image src="//img.alicdn.com/tps/i4/TB18o6AMXXXXXahXVXX6o7KSVXX-730-300.jpg"></image></swiper-item>
</swiper>

效果并不太好，不能彻底展示出比例，看不上去不舒服
在这里插入图片描述

计算方法

swiper宽度 / swiper高度=原图的宽度/原图的高度
能够获得
swpier高度=swiper宽度X原图的高度/原图的宽度
swiper的宽度是100%也就是 100vw，
原图高度=296px
原图宽度=720px
swiper高度=100vw*296/720
这里又会涉及到一个语法就是在web开发和小程序开发中都有的一种自动计算宽高的方式 calc(表达式)
WXSS

swiper{
  width: 100%;
  height: calc(100vw*296/720);
}
image{
  width: 100%;
}

WXML

<swiper>
  <swiper-item ><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1U5ElLFXXXXavXVXXSutbFXXX.jpg"></image></swiper-item>
  <swiper-item ><image mode="widthFix" src="//img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"></image></swiper-item>
  <swiper-item ><image mode="widthFix" src="//img.alicdn.com/tps/i4/TB18o6AMXXXXXahXVXX6o7KSVXX-730-300.jpg"></image></swiper-item>
</swiper>

效果展现，720X296的图片很舒展的在swiper中打开，显示一种美感
在这里插入图片描述

swiper的一些属性

1.autoplay自动轮播

在这里插入图片描述

2. 自定义轮播时间 通常是以毫秒为单位

在这里插入图片描述

3.循环播放，若是不设计这个你会发现图片播放是无序的一旦图片多了就会很糟糕

在这里插入图片描述

4.indicator-dots 显示面板指示点

在这里插入图片描述

5.indicator-color未选中指示器颜色

在这里插入图片描述

6.选中以后的颜色indicator-active-color

在这里插入图片描述

点击进入官网学习更多轮播器知识

navigator 导航标签

1.navigator属于块级元素默认换行，能够直接加宽高属性

2.url 要跳转的页面的路径 能够是相对路径也能够是绝对路径

在这里插入图片描述

3.open-type跳转的方式

1.navigate默认值，保留当前页面跳转到应用内的某个页面，可是不能跳转到tabbar页面！

在这里插入图片描述
在这里插入图片描述

2.redirect关闭当前页面跳转到应用内的某个页面，可是不能跳转到tabbar页面！

在这里插入图片描述

3.跳转到tabbar页面关闭其余的非tabbar页面

在这里插入图片描述
在这里插入图片描述

reLaunch 关闭全部页面打开应用内的某个页面

在这里插入图片描述

联系我们 沪ICP备2021010478号-7