微信小程序购物车+详情+swiper

最新推荐文章于 2022-06-04 20:22:11 发布

微光时空

最新推荐文章于 2022-06-04 20:22:11 发布

阅读量449

点赞数 1

分类专栏：微信小程序文章标签：微信小程序购物车详情

本文链接：https://blog.youkuaiyun.com/M106588L/article/details/101111020

版权

这个教程为初学者提供了微信小程序购物车功能的实现，包括商品加减、全选、显示总价和总数。同时，介绍了Swiper组件的使用以及商品详情页面的创建。建议将本地数据管理放在app.js中，并展示了app.json中tabBar的配置。教程涵盖了home、detail、car三个主要页面的wxml、js和wxss文件结构。通过此教程，希望能对学习微信小程序的开发者有所帮助。

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

这个小案例里面有购物车的加减，全选，总价，总数，swiper,详情，对于初学微信小程序的小伙伴们,希望对你们能够有帮助哦。

如何小伙伴们要写本地数据的话可以写在app.js里面哦，
首先在主文件夹里面的app.json里面写上tabBar
- 这个里面有点击图片选中与没选中的生僻单词，一定要记住哦

 "tabBar": {
   
    "list": [
      {
   
        "iconPath": "./image/12.png",
        "selectedIconPath": "./image/11.png",
        "pagePath": "pages/shopcar/home/home",
        "text": "首页"
      },
      {
   
        "iconPath": "./image/32.png",
        "selectedIconPath": "./image/31.png",
        "pagePath": "pages/shopcar/car/car",
        "text": "购物车"
      },

      {
   
        "iconPath": "./image/42.png",
        "selectedIconPath": "./image/41.png",
        "pagePath": "pages/shopcar/my/mine",
        "text": "我的"
      }
    ]
  },

在shopcar文件夹里面建好文件夹
home>details >car>mine
- home.wxml


<view class="box">  
    <!-- swiper -->
    <view class="image">
          <swiper circular="{
   {circular}}"  indicator-dots="{
   {indicatorDots}}"
          autoplay="{
   {autoplay}}" interval="{
   {interval}}" duration="{
   {duration}}">
          <block wx:for="{
   {imgList}}" vx:for-item="item">
              <swiper-item class="swiper">
                <image src="{
   {item.img}}" class="slide-image" 
                width="355" height="550"/>
              </swiper-item>
            </block>
        </swiper>
    </view> 
     <!-- 购物车部分 -->
    <view class="shopcar">
         <scroll-view>
             <view class="list" wx:for="{
   {shopcar}}" wx:for-item="item" bindtap="goDetail" data-id="{
   {item.id}}">
                 <view class="imgs"> <image src="{
   {item.img}}"/></view>
                 <view class="center">
                        <view>{
   {
   item.title}}</view>
                         <view>温馨提示:{
   {
   item.title1}}</view>
                        <view class="price">￥{
   {
   item.price}}</view>
                       
                        <!-- <view class="btn">
                            <text>+</text>
                              <view>0</view>
                            <text>-</text>
                        </view> -->
                  </view>
                  <!-- <button>删除</button> -->
              </view>
         </scroll-view>
    </view>
</view>

home.js

// pages/shopcar/home/home.js
let app=getApp()
Page({
   
  /**
   * 页面的初始数据
   */
  data: {
   
    imgList:[], //swiper数据
    indicatorDots: true,
    autoplay: true,
    interval: 4000,
    duration: 1000,
    circular:true , //无缝
    shopcar:[]
   
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    let imgs = app.globalData.imgs;
    let shopcar=app.globalData.shopcar;
    this.setData({
   
      imgList:imgs,
      shopcar:shopcar
    })
    
  },
  goDetail(e){
    //跳转详情
    let id=e.currentTarget.dataset.</