通過搜索頁面?zhèn)魅氲膇d，來進行操作（沒有接口，都是假數(shù)據(jù)），頁面如下

首先先把頁面搭建起來，并進行渲染頂部導(dǎo)航欄已經(jīng)做過現(xiàn)在就不發(fā)了，直接復(fù)制就好

頁面信息的wxml

<view style="padding-top: {{pageTopHeight}}px;">
    <!--輪播圖-->
    <swiper style="background: #fff;padding:30rpx 0rpx 20rpx 0rpx;height:750rpx;width: 100%;" bindchange='onSlideChange'>
        <swiper-item wx:for="{{list.imgUrls}}" style="height: 400rpx;">
             <image style="width: 100%;height: 100%;" src='{{item}}' />
        </swiper-item>
   </swiper>
 <!--輪播圖數(shù)字序號-->
   <view class="num">{{lunboindex}}/{{list.imgUrls.length}}</view>
<!--商品信息-->
    <view style="background-color: #fff;padding:0rpx 20rpx 20rpx 30rpx;">
         <view style="color: #fc4442;font-weight: bolder;font-size: 40rpx;"><span style="font-size: 25rpx;">￥</span>{{list.price}}</view>
         <view style="font-weight: bolder;margin-top: 10rpx;font-size: 30rpx;">{{list.title}}</view>
    </view>
    <view class="select_wrap" bindtap="bindViewTab">
       <text>請選擇：</text>
    </view>
    <view class="store_text">門店信息</view>
    <view style="background-color: #fff;padding: 20rpx;display: flex;">
             <view style="flex: 1;text-align: left;">
                  <view style="display: flex;">
                      <view>
                          <image style="width: 80rpx;height: 80rpx;" src="/Images/7.png"></image>
                      </view>
                      <view style="margin-left: 15rpx;"> 
                          <view>小馬樂購</view>
                          <view style="font-size: 14px;color: #999999;">石家莊正定></view>
                      </view>
                  </view>
             </view>
             <view style="text-align: right;flex: 1;margin-top: 20rpx;"><image style="width: 40rpx;height: 40rpx;" src="/Images/24gf-phoneLoudspeaker.png"></image></view>
    </view>
    <view class="" style="display: flex;background-color: #fff;margin: 20rpx 0;padding: 20rpx;" >
       <view>用戶評論（0）</view>
       <view style="text-align: right;flex: 1;color: #8a8788;">更多評論></view>
    </view>
    <view style="margin: 20rpx 0;">
        <view style="background-color: #fff;padding: 20rpx;text-align: center;">產(chǎn)品介紹</view>
        <view style="height: 4000px;">
            <image style="width: 100%;height: 100%;" src="{{list.img}}"></image>
        </view>
    </view>
</view>

尾部導(dǎo)航欄wxml?

<view class="footer" >
    <view style="flex: 1;margin-top: 20rpx;">
        <view><image src="/Images/likefu.png"></image></view>
        <view>客服</view>
    </view>
    <view style="flex: 1;margin-top: 20rpx;"> 
        <view><image src="/Images/shoucang.png"></image></view>
        <view>收藏</view>
    </view>
    <view style="flex: 1;margin-top: 20rpx;"  bindtap="wpnumber">
        <view><image src="/Images/ligouwuche.png"></image></view>
        <view >購物車</view>
        <view class="wp_number">{{jial}}</view>
    </view>
    <view class="shopping_cart" style="background-color: #fa8412;border-radius: 50rpx 0rpx 0rpx 50rpx;" bindtap="bindViewTab" >
    加入購物車
    </view> 
    <view class="shopping_cart" style="background-color: #ec3c20;border-radius: 0rpx 50rpx 50rpx 0rpx;">立即購買</view> 
</view>

js

data:{
     list:[],//數(shù)據(jù)
     lunboindex:1，//輪播圖數(shù)字序號
}
 /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
 onLoad: function (options) {
        //獲取全部數(shù)據(jù)
         var list = wx.getStorageSync('tokey')
        // 獲取傳過來的id
         var id = options.id
         var that=this
         for(let i=0;i<list.length;i++){
            //  遍歷一下數(shù)據(jù)，并把id進行對比，id一樣獲取數(shù)據(jù)
            if(list[i].id == id){
                that.lists = list[i]
            }
              
            that.setData({
               list:that.lists,//獲取到的值添到data里面
          
           })
}，
   // 輪播圖滑動時觸發(fā)，當前頁索引改變，輪播圖數(shù)字序號
    onSlideChange(e) {
      this.setData({
        lunboindex: e.detail.current + 1//獲取到的值添到data里面
      })
    },

wxss

/* 選擇 */
.select_wrap{
    background: #fff;
    margin: 20rpx 0;
    padding: 20rpx;
    color: #8e9099;
    font-size: 14px;
}
/* 門店 */
.store_text{
    background-color: #fff;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f1f1f1;
    padding: 20rpx;
    font-size: 16px;
}
/* 輪播數(shù)字 */
 .num{
       background-color: #fff;
       position: absolute;
       right: 30px;
       margin-top:-50px;
       padding: 2rpx 5rpx;
 }
/* 尾部 */
.footer{
    display: flex;
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    border-top: 1px solid #f1f1f1;
    position: fixed;
    bottom: 0;
    z-index: 5;
    padding: 0rpx 30rpx;
    font-size: 12px;
    color: #676774;
}
.footer image{
    width: 40rpx;
    height: 40rpx;
}
/* 購物車 */
.wp_number{
    position: absolute;
    top:5rpx;
    margin-left: 30rpx;
    border: 1px solid #ea4233;
    border-radius: 100rpx;
    padding:0rpx 6rpx;
    font-size: 11px;
    color:#ea4233;
}
.shopping_cart{
    margin: 10rpx 0;
    color: #fff;
    padding: 0 45rpx;
    font-size: 14px;
    line-height: 80rpx;
}

現(xiàn)在簡單的小頁面完成了文章來源地址http://www.zghlxwxcb.cn/news/detail-764049.html

到了這里，關(guān)于微信小程序商品詳情頁(頁面的實現(xiàn))的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！