微信小程序商品详情页(页面的实现)

通过搜索页面传入的id，来进行操作（没有接口，都是假数据），页面如下

首先先把页面搭建起来，并进行渲染顶部导航栏已经做过现在就不发了，直接复制就好

页面信息的wxml

    
    
        
             
        
   
 
   {{lunboindex}}/{{list.imgUrls.length}}

    
         ￥{{list.price}}
         {{list.title}}
    
    
       请选择：
    
    门店信息
    
             
                  
                      
                          
                      
                       
                          小马乐购
                          石家庄正定>
                      
                  
             
             
    
    
       用户评论（0）
       更多评论>
    
    
        产品介绍
        
            
        
    

尾部导航栏wxml 

    
        
        客服
    
     
        
        收藏
    
    
        
        购物车
        {{jial}}
    
    
    加入购物车
     
    立即购买 

js

data:{
     list:[],//数据
     lunboindex:1，//轮播图数字序号
}
 /**
     * 生命周期函数--监听页面加载
     */
 onLoad: function (options) {
        //获取全部数据
         var list = wx.getStorageSync('tokey')
        // 获取传过来的id
         var id = options.id
         var that=this
         for(let i=0;i

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;
}
/* 轮播数字 */
 .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;
}

现在简单的小页面完成了