当前位置:网站首页>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
边栏推荐
- Leetcode- number of maximum consecutive ones - simple
- 1+1>2,Share Creators可以帮助您实现
- View绘制整体流程简析
- Self summarizing
- Echart柱状图:echart实现堆叠柱状图
- The Boys x PUBGMOBILE 联动火热来袭!来看最新游戏海报
- Leetcode- string addition - simple
- Multiple reception occurs in the uniapp message delivery
- CORS request principle
- Echart柱状图:堆叠柱状图显示value
猜你喜欢
A glimpse of [wechat applet]
Status management --provider
[turn] explain awk (1)__ Awk Basics_ Options_ Program segment parsing and examples
Echart柱状图:堆叠柱状图value格式化显示
Missing tag identification in cots RFID systems: bringing the gap between theory and Practice
Echart line chart: when multiple lines have the same name, the legend is still displayed
自我总结ing
pthon 执行 pip 指令报错 You should consider upgrading via ...
1+1 > 2, share creators can help you achieve
USB debugging assistant (20191028)
随机推荐
超有范的 logo 在线设计制作工具
Alibaba cloud OSS file download cannot be resumed at a breakpoint
Leetcode- keyboard line - simple
[spark]spark introductory practical series_ 8_ Spark_ Mllib (lower)__ Machine learning library sparkmllib practice
Echart柱状图:堆叠柱状图value格式化显示
推荐扩容工具,彻底解决C盘及其它磁盘空间不够的难题
Uni app provincial and urban linkage
二分查找
Echart rectangular tree diagram: simple implementation of rectangular tree diagram
[one · data 𞓜 simple implementation of the leading two-way circular linked list]
Adding classes dynamically in uni app
AI实现亲人“复活”|老照片修复|老照片上色,免费APP推荐
【DP之01背包】
js-bom
Echart柱状图:堆叠柱状图显示value
[turn] explain awk (2)_ Combining formatted output with built-in variables to realize requirements
USB debugging assistant
Leetcode- reverse vowels in string - simple
Missing tag identification in cots RFID systems: bringing the gap between theory and Practice
USB status error and its cause (error code)