微信小程序文章详情页跳转案例详解

微信小程序文章详情页跳转案例详解微信小程序文章详情页跳转案例详解

主要介绍了微信小程序文章详情页跳转案例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前面写了一篇小程序访问公众号文章

里面所有的文章列表里面都是跳转了同一篇文章链接，那么，如果所有的列表跳转详情页的时候，跳转对应id所在的文章又该怎么写？

index.html

<view class="container">

<view wx:for="{{cardTeams}}" wx:key="{{index}}" wx:for-item="cardTeam" class="item">

<image class="img" src="{{cardTeam.imgsrc}}" mode="scaleToFill"></image>

<navigator url="../details/details?goodsId={{index}}">查看详情</navigator>

</view>

</view>

</view>

</view>

index.wxss

.container {

padding-top: 0;

}

.item {

}

.item:first-child {

margin-top: 0;

}

.item .remove {

width: 60px;

height: 100%;

background-color: red;

position: absolute;

top: 0;

padding-top: 25rpx;

flex-direction: column;

justify-content: space-between;

}

.item .ok {

width: 60px;

height: 100%;

padding-right: 20rpx;

display: flex;

height: 150rpx;

padding: 20rpx;

}

.number-wrapper .name {

margin: 10rpx 10rpx 10rpx 10rpx;

font-size: 39rpx;

overflow: hidden;

}

.number-wrapper .count-wrapper {

display: flex;

}

.number-wrapper .count-wrapper .increase-btn {

font-size: 30rpx;

}

.number-wrapper .count-wrapper .count {

margin: 0 1rpx 0 1rpx;

font-size: 30rpx;

}

.number-wrapper .price-wrapper .people {

margin-left: 250rpx;

height: 70rpx;

margin: 20rpx;

padding: 5rpx;

border: 1px #e4e2e2 solid;

border-width: thin;

align-items: center;

}

.input {

flex: 1;

height: 60rpx;