微信小程序点击跳转页面

 

 

 第一步：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;
}