先看一下效果吧
我们先简单说一下流程
从父级携带多参跳转,子页接收该参数并动态修改顶部标题
实现代码
父级
wxml
<view class="classify-list">
<view class="classify" wx:for="{{classifyList}}" wx:key="index">
<view data-index="{{index}}" bindtap="chooseSort" data-postname="{{item.title}}">
<view><image src="{{item.img}}"></image></view>
<view class="mask"></view>
<view class="classify-title">{{item.title}}</view>
</view>
</view>
</view>
父级主要是data-index=""{{}}传参的
这里css就不说,我们今天主要是页面跳转携带多参并接收参数动态修改顶部标题
重要代码 js
chooseSort: function(e) {
var index = e.currentTarget.dataset.index;
var postname = e.currentTarget.dataset.postname;
if(index == 0) {
wx.navigateTo({
url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
})
}
if (index == 1) {
wx.navigateTo({
url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
})
}
if (index == 2) {
wx.navigateTo({
url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
})
}
if (index == 3) {
wx.navigateTo({
url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
})
}
if (index == 4) {
wx.navigateTo({
url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
})
}
if (index == 5) {
wx.navigateTo({
url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
})
}
},
这里我为什么写这么多的判断,这是根据索引判断点击的那个分类,
这里我们也可以优化一下
chooseSort: function(e) {
var index = e.currentTarget.dataset.index;
var postname = e.currentTarget.dataset.postname;
wx.navigateTo({
url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
})
},
第一种方法比较笨拙,如果数据过多,你就会头疼死
第二种方法比较灵活,不管你有多少数据,一句代码搞定
子页面
wxml
<view class="hot-list">
<view class="books" wx:for="{{hotList}}" wx:key="index">
<image src="{{item.img}}"></image>
<view class="books-right">
<view class="books-title">
<view>{{item.title}}</view>
<!-- <view>{{index + 1}}</view> -->
</view>
<view class="books-introduce">[{{item.status}}]{{item.introduce}}</view>
<view class="book-B">
<view>
<image src="{{iconUser808080}}"></image>
<view>{{item.author}}</view>
</view>
<view>
<text>{{item.category}}</text>
</view>
</view>
</view>
</view>
</view>
主要代码 js
data: {
postName: "",
},
// 动态修改顶部标题
dynamicStateTitle: function() {
wx.setNavigationBarTitle({
title: this.postName
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var postName = options.postName;
this.postName = postName;
this.dynamicStateTitle();
},
这里在onLoad接收参数,在data中定义一个postName空变量,将接收的参数赋值给它,在父级点击的时候在子页面触发dynamicStateTitle函数
微信小程序刚进来的时候优先执行onLoad,所以在onLoad调用dynamicStateTitle函数
如有更好的方法,希望下方留言,共同学习,一起进步, 学无止境