?

?

?第一步：index.wxml

<button  bindtap="gotoPage" style="color: rgb(151, 27, 27);">詳情頁(yè)面</button>

第二步：index.js

// 詳情頁(yè)面跳轉(zhuǎn)頁(yè)面
  gotoPage: function (options) {
        wx.navigateTo({
          url: '/pages/xiang/xiang',
        })
 },

以下是點(diǎn)擊跳轉(zhuǎn)的詳情頁(yè)面：

xiang.wxml:

<view>
<view class="v1">
    111111111111111111
</view>
<view class="v21">
<view class="v2">
<image class="im1" src="/imgs/藍(lán)色花.png" alt=""/>
</view>
<view class="v3">
<text>智駕網(wǎng)\n</text>
<text style="font-size:12px; color: rgb(180, 177, 177);">2022年11月24日10:13 遼寧 汽車領(lǐng)域創(chuàng)作者</text>
</view>
<view class="v4">+關(guān)注</view>
</view>
<view class="v5">
<text>從今年中國(guó)市場(chǎng)電動(dòng)汽車的飛速發(fā)展來看，在汽\n</text>
<text>車行業(yè)整體平緩發(fā)展的大盤中，電動(dòng)汽車呈現(xiàn)出\n</text>
<text>指數(shù)級(jí)的變化。這對(duì)于小米集團(tuán)有兩個(gè)方面的刺\n</text>
<text>激，一方面必須進(jìn)一步加大研發(fā)投入，才可能保\n</text>
<text>證產(chǎn)品在投放市時(shí)，產(chǎn)品不落后，其二，必須提\n</text>
<text>速產(chǎn)品上市的時(shí)間，防止在產(chǎn)品上市時(shí)，市場(chǎng)的\n</text>
<text>高速增長(zhǎng)趨勢(shì)已經(jīng)結(jié)束,而產(chǎn)品已經(jīng)飽合。\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>節(jié)奏，同時(shí)不焦慮對(duì)于雷布斯變?yōu)槔姿箍烁黒n</text>
<text>為重要\n</text>
<text>節(jié)奏，同時(shí)不焦慮對(duì)于雷布斯變?yōu)槔姿箍烁黒n</text>
<text>為重要\n</text>
<text>節(jié)奏，同時(shí)不焦慮對(duì)于雷布斯變?yōu)槔姿箍烁黒n</text>
<text>為重要\n</text>
</view>
<view class="v7">
<view class="v71">
<input class="ip1" placeholder="要友好評(píng)論哦" type="text"/></view>
<view class="v72">
    <image class="im3" src="/imgs/信息.png"></image>
</view>
<view class="v72">
    <image class="im3" src="/imgs/點(diǎn)贊.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:文章來源地址http://www.zghlxwxcb.cn/news/detail-628556.html

/* 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;
}

到了這里，關(guān)于微信小程序點(diǎn)擊跳轉(zhuǎn)頁(yè)面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！