第一步：index.wxml

<button  bindtap="gotoPage" style="color: rgb(151, 27, 27);">详情页面</button>

第二步：index.js

// 详情页面跳转页面gotoPage: function (options) {wx.navigateTo({url: '/pages/xiang/xiang',})},

以下是点击跳转的详情页面：

xiang.wxml:

<view>
<view class="v1">111111111111111111
</view>
<view class="v21">
<view class="v2">
<image class="im1" src="/imgs/蓝色花.png" alt=""/>
</view>
<view class="v3">
<text>智驾网\n</text>
<text style="font-size:12px; color: rgb(180, 177, 177);">2022年11月24日10:13 辽宁 汽车领域创作者</text>
</view>
<view class="v4">+关注</view>
</view>
<view class="v5">
<text>从今年中国市场电动汽车的飞速发展来看，在汽\n</text>
<text>车行业整体平缓发展的大盘中，电动汽车呈现出\n</text>
<text>指数级的变化。这对于小米集团有两个方面的刺\n</text>
<text>激，一方面必须进一步加大研发投入，才可能保\n</text>
<text>证产品在投放市时，产品不落后，其二，必须提\n</text>
<text>速产品上市的时间，防止在产品上市时，市场的\n</text>
<text>高速增长趋势已经结束,而产品已经饱合。\n</text>
</view>
<view class="v6"><image class="im2" src="https://c-ssl.dtstatic.com/uploads/item/202003/08/20200308172425_3eCnW.thumb.1000_0.jpeg"></image></view>
<view class="v51">
<text>节奏，同时不焦虑对于雷布斯变为雷斯克更\n</text>
<text>为重要\n</text>
<text>节奏，同时不焦虑对于雷布斯变为雷斯克更\n</text>
<text>为重要\n</text>
<text>节奏，同时不焦虑对于雷布斯变为雷斯克更\n</text>
<text>为重要\n</text>
</view>
<view class="v7">
<view class="v71">
<input class="ip1" placeholder="要友好评论哦" type="text"/></view>
<view class="v72"><image class="im3" src="/imgs/信息.png"></image>
</view>
<view class="v72"><image class="im3" src="/imgs/点赞.png"></image>
</view>
<view class="v72"><image class="im3" src="/imgs/收藏.png"></image>
</view>
<view class="v72"><image class="im3" src="/imgs/微信.png"></image>
</view>
<view class="v72"><image class="im3" src="/imgs/泳圈.png"></image>
</view></view></view>

xiang.wxss:

/* pages/xiang/xiang.wxss */
.v1{width: 750rpx;margin: auto;font-size: 25px;line-height: 40px;
}
.v2{float: left;
}
.im1{width: 40px;height: 40px;
}
.v3{float: left;margin-left: 5px;
}
.v21{width: 750rpx;display: flex;justify-content: center;margin-top: 10px;
}
.v4{margin-left: 5px;float: left;width: 70px;height: 30px;background: rgb(58, 58, 241);line-height: 30px;text-align: center;border-radius: 20px;color: #fff;margin-top: 10px;
}
.v5{width: 750rpx;margin-left: 20px;line-height: 30px;margin-top: 20px;
}
.v51{width: 750rpx;margin-left: 20px;line-height: 30px;margin-top: 20px;margin-bottom: 75px;
}
.v6{width: 750rpx;text-align: center;margin-top: 20px;
}
.im2{border-radius: 10px;
}
.v7{position: fixed;bottom: 0;width: 750rpx;height: 60px;background: rgb(248, 246, 246);display: flex;justify-content: center;
}
.ip1{width: 130px;height: 30px;background-color: rgb(231, 229, 229);border-radius:15px ;margin-top: 10px;
}
.v71{float: left;
}
.v72{float: left;
}.im3{width: 30px;height: 30px;margin-top: 10px;margin-left: 13px;
}