当前位置:网站首页>Wechat applet (function transfer parameters, transfer multiple parameters, page Jump)
Wechat applet (function transfer parameters, transfer multiple parameters, page Jump)
2022-06-13 06:11:00 【Vue sauce】
##1. Function arguments :
<!--bindtap-- Event name ;personalCollect-- Function name ; data-type--- Parameters -->
<text class="flex {
{collectType==0?'collectActive':''}}" bindtap="personalCollect" data-type="0"> travel </text>
<text class="flex {
{collectType==1?'collectActive':''}}" bindtap="personalCollect" data-type="1"> Photography </text>
js : Get parameter value
//js file
personalCollect (event) {
let num = event.currentTarget.dataset.type// obtain event Parameters transmitted
},
##2. Page Jump ( Jump to a new page )
<!-- wxml file -->
<!--bindtap Binding function , Click the jump -->
<view bindtap="onSkip"> Jump to the page </view>
//js file
onSkip () {
//wx.navigateTo: Keep the current page , Jump to a page in the app
//url: Page path to jump to
wx.navigateTo({
url: '../pages/sonPage/collect',
})
},
Jump through multiple parameters :
<!-- Parent page -->
<view bindtap="onSkip" data-url="./sonPage/details?id={
{article.id}}" data-city="{
{article.cityName}}">
onSkip(e) {
let url = e.currentTarget.dataset.url
let city = e.currentTarget.dataset.city
wx.navigateTo({
`${
url}&city=${
city}` // Each value uses & Separate , city To get better values for sub pages
})
},
// The child page gets the parameters of the parent page
onLoad:(options)=>{
console.log(options)// Here the bread contains the transmitted value
}
summary :
Function arguments : Because the development of wechat small program is different from the past ordinary web Development , Unable to get js obtain wxml Of documents dom structure , But you can use wechat applet data binding and view Labeled ”data-xx“ Custom properties to change the label class name , Pass value wxml Set up data-[ Parameter name ] Pass parameters ,[ Parameter name ] It can only be lowercase , It can't be capitalized
Page Jump : Page Jump also has a jump called wx.switchTab, It's a jump to tabBar page , And shut down all the others tabBar page , The usage is almost the same , Check out the official documentation
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
边栏推荐
- Interrupt processing
- [to]12 common IP commands in the iproute installation package
- Sqlplus connection failure
- Minimum spanning tree (prim+kruskal) learning notes (template +oj topic)
- 杨辉三角形详解
- Echart柱状图:堆叠柱状图显示value
- Leetcode- first unique character in string - simple
- Echart histogram: stacked histogram displays value
- Huawei developer certification and deveco studio compiler Download
- Leetcode- hex number - simple
猜你喜欢

免费录屏软件Captura下载安装

Fichier local second Search Tool everything
![[compilation and assembly link] coff file and structure description](/img/73/fca3752327c31877ea8f56f96c009e.jpg)
[compilation and assembly link] coff file and structure description

Echart折线图:当多条折线存在相同name,图例仍全部显示

1+1 > 2, share creators can help you achieve
![A glimpse of [wechat applet]](/img/ef/17564759e720b06c2bd496d1db7544.jpg)
A glimpse of [wechat applet]

Binary search

AI实现亲人“复活”|老照片修复|老照片上色,免费APP推荐

Complete USB debugging assistant

The Boys x PUBGMOBILE 联动火热来袭!来看最新游戏海报
随机推荐
Leetcode- reverse vowels in string - simple
Printf function
Pod libwebp error reporting solution
Leetcode- student attendance record i- simple
Leetcode- number of maximum consecutive ones - simple
Leetcode- find a difference - simple
MySQL stored procedure
Introduction to USB learning (5) -- looking back, the man was in the dim light
Leetcode- complement of numbers - simple
Leetcode minimum absolute difference of binary search tree simple
Software testing - Summary of common interface problems
Leetcode- detect uppercase letters - simple
Leetcode perfect number simple
PHP redis makes high burst spike
USB status error and its cause (error code)
Introduction to USB learning (I) -- Dongfeng night flower tree
免费录屏软件Captura下载安装
本地文件秒搜工具 Everything
[spark]spark introductory practical series_ 8_ Spark_ Mllib (lower)__ Machine learning library sparkmllib practice
Echart柱状图:echart实现堆叠柱状图