当前位置:网站首页>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
边栏推荐
- Time conversion'2015-04-20t11:12:00.000+0000 '
- Intelligent digital asset management helps enterprises win the post epidemic Era
- [var const let differences]
- Echart line chart: different colors are displayed when the names of multiple line charts are the same
- Leetcode- divide candy - simple
- Leetcode- first unique character in string - simple
- Regular verification of mobile phone number, landline email ID card
- 軟件測試——接口常見問題匯總
- MySQL trigger
- [turn] explain awk (1)__ Awk Basics_ Options_ Program segment parsing and examples
猜你喜欢
Hbuilderx: installation of hbuilderx and its common plug-ins
Echart line chart: different colors are displayed when the names of multiple line charts are the same
不在以下合法域名列表中,微信小程序解决办法
Status management --provider
Echart折线图:当多条折线图的name一样时也显示不同的颜色
Self summarizing
自定义View —— 可伸展的CollapsExpendView
Zero copy technology
[spark]spark introductory practical series_ 8_ Spark_ Mllib (upper)__ Introduction to machine learning and sparkmllib
Fichier local second Search Tool everything
随机推荐
Uni app disable native navigation bar
Commit specification
Detailed explanation of Yanghui triangle
1+1>2,Share Creators可以帮助您实现
[written examination questions of meituan]
Leetcode minimum absolute difference of binary search tree simple
Fragment lifecycle
Waterfall flow layout of uni app Homepage
Binary search
Leetcode Hamming distance simple
USB status error and its cause (error code)
A glimpse of [wechat applet]
php redis 制作高迸发秒杀
Echart折线图:当多条折线存在相同name,图例仍全部显示
A brief analysis of the overall process of view drawing
FusionPBX 安装 —— 筑梦之路
安全基线检查脚本—— 筑梦之路
The SQL file of mysql8.0 was imported into version 5.5. There was a pit
Leetcode- complement of numbers - simple
[turn] explain awk (1)__ Awk Basics_ Options_ Program segment parsing and examples