微信小程序商品详情页(页面的实现)-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序商品详情页(页面的实现)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

通过搜索页面传入的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>

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

现在简单的小页面完成了文章来源地址https://www.toymoban.com/news/detail-764049.html

到了这里，关于微信小程序商品详情页(页面的实现)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！