微信小程序轮播图

最新推荐文章于 2022-02-22 23:13:38 发布

qq斯国一

最新推荐文章于 2022-02-22 23:13:38 发布

阅读量164

点赞数

分类专栏：微信小程序笔记

本文链接：https://blog.youkuaiyun.com/qq_35988224/article/details/113385161

版权

笔记同时被 2 个专栏收录

68 篇文章

订阅专栏

微信小程序

15 篇文章

订阅专栏

该博客展示了如何在小程序中实现商品详情页面。通过`pages/goods_detail/goods_detail.js`文件，利用`request`获取商品详情数据，并在`onLoad`函数中调用`getGoodsDetail`方法填充数据。页面结构中使用了`swiper`组件展示商品图片，图片宽度设置为屏幕宽度的60%。此外，还定义了`.detail_swiper`类来设定swiper组件的高度和图片样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// pages/goods_detail/goods_detail.js
import { request } from "../../request/index.js";
Page({

  data: {
    goodsObj:{}
  },

  onLoad: function (options) {
    const {goods_id}=options;
    this.getGoodsDetail(goods_id)
    
  },
  async getGoodsDetail(goods_id){
    const goodsObj                                                                            =await request({url:"/goods/detail",data:{goods_id}});
    this.setData({goodsObj})
 }

})

在这里插入图片描述

<view class="detail_swiper">
  <swiper
  autoplay
  circular
  indicator-dots>
    <swiper-item 
    wx:for="{{goodsObj.pics}}" 
    wx:key="pics_id">
      <image mode="widthFix" src="{{item.pics_mid}}"></image>
    </swiper-item>
  </swiper>
</view>

.detail_swiper{
    swiper{
        // swiper 固定高度
        height: 65vw;
        text-align: center;
        image{
            width: 60%;
        }
    }
}