^转摘小学期微信小程序实训篇3_双向绑定、图像image及轮播swiper、导航标签navigator、自定义组件及传值

2023-06-28 10:34:19将寒烟阅读量 14

一、双向绑定

概念

方向一: js中data里定义的值 ------> 标签中的值发生改变；
方向二：标签中的值输入------> 改变到了js中data里定义的值；

使用model:value绑定

js代码

Page({
data: {
inputValue: "我是没有感情的测试机器"
}
})
wxml代码
<view>{{inputValue}}</view>

二、图像image 标签

回顾web中的图片的特点

图片的默认宽度和高度直接等于原图片的宽度和高度
图片的宽度发生改变了之后,图片高度会等比例拉伸

小程序中图片默认情况

默认的宽度和高度 320 * 240
当图片宽度发生改变时候,高度还是240

可以将图片看成 相框 + 内容****图片渲染模式mode

mode ="scallToFill" 默认值
设置图片的内容拉伸到相框的大小 (不按照比例)
mode="aspectFit" 会等比例拉伸图片的内容
一直拉伸直到内容某一个边触碰到相框
可能会出现相框中的空白区域
mode="aspectFill" 等比例的拉伸图片
图片的内容会填充满相框
可能出出现图片内容被裁剪
mode="widthFix" 等比例拉伸图片内容同时也会拉伸相框 (css中height的值可能会失效)
才是最像以前web中的图片的效果宽度改变的时候高度会等比例等着改变

三、轮播图swiper

常用的属性

autoplay 自动轮播常用
indicator-dots 面板指示器常用
indicator-color 未选中的指示点的颜色不常用
indicator-active-color 选中指示点的颜色不常用
circular 衔接滚动常用

举栗

复制代码

<!-- 
  轮播图标签
  1 swiper
  2 轮播项 swiper-item
  3 swiper-item 决定它里面放什么标签 
  4 情况
    1 默认情况下 swiper标签高度是150px  图片默认高度240px
    2 autoplay 自动轮播   常用
    3 indicator-dots 面板指示器 常用
    4 indicator-color 未选中的指示点的颜色 不常用
    5 indicator-active-color 选中指示点的颜色 不常用
    6 circular 衔接滚动  常用

 -->

<!-- 1 swiper 最外层 -->
<!-- <swiper autoplay="{{true}}"> -->
<swiper autoplay indicator-dots
indicator-color="yellow"
indicator-active-color="red"
circular
>
  <!-- 2 swiper-item 轮播项 -->
  <swiper-item> <image mode="aspectFill" src="/image/2.jpg"></image>  </swiper-item>
  <swiper-item> <image mode="aspectFill" src="/image/3.jpg"></image>  </swiper-item>
  <swiper-item> <image mode="aspectFill" src="/image/4.jpg"></image>  </swiper-item>
</swiper>

四、导航标签Navigator

概念

像之前的a标签一样
使用open-type设置方式

属性有

target 在哪个目标发生跳转，默认为self（当前小程序），可以设置miniProgram（其他小程序）
url 当前小程序内的跳转链接
delta 回退的层数，当 open-type 为 'navigateBack' 时有效，表示回退的层数，默认值为1
app-id 打开的小程序appid,当target="miniProgram"时有效，要打开的小程序 appId
path 当target="miniProgram"v时有效，打开的页面路径，如果为空则打开首页
extra-data 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow()中获取到这份数据。
version 当target="miniProgram"时有效，要打开的小程序版本
hover-class 指定点击时的样式类，当hover-class="none"时，没有点击态效果,默认navigator-hover
...

open-type跳转方式

|--------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 值 | 说明 |
| navigate | 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面 ,对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 |
| redirect | 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。对应 wx.redirectTo 的功能 |
| switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
| reLaunch | 关闭所有页面，打开到应用内的某个页面 |
| navigateBack | 关闭当前页面，返回上一页面或多级页面。可通过 [getCurrentPages()](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html#getcurrentpages) 获取当前的页面栈，决定需要返回几层 |
| exit | 退出小程序，target="miniProgram"时生效 |

举栗

复制代码

<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

举栗

wx.navigateTo()用法举栗：当前页调到test页，成功之后

成功回调函数中：回调当前页的函数，传递data到test页
test监听当当前页的xxx事件，获得数据

wx.navigateTo({
url: 'test?id=1',//url需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
//events页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
// 成功回调函数
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
//object.success 的回调函数 eventChannel
const eventChannel = this.getOpenerEventChannel()
复制代码
```
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
  eventChannel.emit('someEvent', {data: 'test'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}
```
})

参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

五、自定义组件

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

1.新建组件

项目目录新建components文件夹
新建一个xxx组件，js中设置"component": true,
父组件json页面引入组件（注意/开头的话是绝对路径，反之为相对路径）

{
"usingComponents": {
"cirimg":"/components/cirimg/cirimg"
}
}
使用<xxx></xxx>

5.1组件传值-父组件向子组件传值

目的：每次使用子组件，可以使用父组件中自定义的值给子组件，特色显示内容

即父组件使用子组件的结构，但是显示的内容要由父组件自己决定

父组件属性的方式向子组件传值：父组件使用属性传参 --- 自定义属性名称 + 差值表达式
子组件js接收父组件传递的数据：回到子组件的js文件里，找到properties属性来接收父组件传递过来的内容，需要默认值的话，在子组件的js里面properties中找到tabs属性里面写上value
子组件wxml显示传递的数据：去到子组件的wxml文件里，使用差值表达式数据绑定的方法绑定properties里面的属性名称--tabs

子组件js

// components/cirimg/cirimg.js
Component({
/* 用来接收父组件的数据 */
properties: {
// 接收数据的名称
titles:{
// 这个数据是什么类型
// Object String Number Array Boolean
type:String,
// 默认值(人家不传递 titles= 默认值 )
value:"白粥"
}
}
})

![小学期微信小程序实训篇3_双向绑定、图像image及轮播swiper、导航标签navigator、自定义组件及传值_数据](https://s2.51cto.com/images/blog/202306/28101151_649b96e7b902127277.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")

5.2组件传值-子组件向父组件传值

基本步骤

子组件页面中定义事件点击事件
js中定义事件方法,里面使用this.triggerEvent("父组件中监听的方法", 传递的值);，可以理解为传给父组件中一个方法绑定值，这个方法需要父组件监听收取。

/**
- 组件的方法列表
  */
  methods: {
  // 点击评论按钮
  twoLevelCommentBtnClick: function (e) {
  let authorName = e.currentTarget.dataset.authorName;
  this.triggerEvent("父组件中监听的方法", 待传子组件中的值);
  },
  },
在父组件引入子组件的时候，需要bind:子传递的方法='父组件自定义方法'，通过父组件自定义的方法收取参数

// 二级评论按钮点击
父组件自定义方法(e) {
this.setData({
xxx: e.detail
});

},

参考：https://www.jianshu.com/p/d15cde54768d，[微信开发文档]```(https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html#触发事件)```

复制代码

    ===========================
    【来源： 51CTO】
    【作者： sichaolong】
    【原文链接】 https://blog.51cto.com/u_15790456/6569753
    声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。

标签：小程序

0/300

全部评论0

转摘小学期微信小程序实训篇3_双向绑定、图像image及轮播swiper、导航标签navigator、自定义组件及传值

目录

一、双向绑定

二、图像image 标签

三、轮播图swiper

四、导航标签Navigator

五、自定义组件

5.1组件传值-父组件向子组件传值

5.2组件传值-子组件向父组件传值

^转摘小学期微信小程序实训篇3_双向绑定、图像image及轮播swiper、导航标签navigator、自定义组件及传值