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

avatar
作者
筋斗云
阅读量:0

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

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

页面信息的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>  <!--轮播图数字序号-->    <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;">产品介绍</view>         <view style="height: 4000px;">             <image style="width: 100%;height: 100%;" src="{{list.img}}"></image>         </view>     </view> </view>

尾部导航栏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:[],//数据      lunboindex:1,//轮播图数字序号 }  /**      * 生命周期函数--监听页面加载      */  onLoad: function (options) {         //获取全部数据          var list = wx.getStorageSync('tokey')         // 获取传过来的id          var id = options.id          var that=this          for(let i=0;i<list.length;i++){             //  遍历一下数据,并把id进行对比,id一样获取数据             if(list[i].id == id){                 that.lists = list[i]             }                            that.setData({                list:that.lists,//获取到的值添到data里面                       }) },    // 轮播图滑动时触发,当前页索引改变,轮播图数字序号     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; } /* 轮播数字 */  .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; }

现在简单的小页面完成了

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!