微信小程序购物车和左侧导航栏

已于 2022-06-01 21:40:03 修改
阅读量3.9k 收藏 115
点赞数 3
文章标签： 微信小程序 小程序 javascript
于 2022-06-01 21:38:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47548037/article/details/125090657
版权
本文详细介绍了微信小程序中购物车功能的实现，包括商品添加、数量增减、全选与清空操作。代码示例展示了如何处理缓存数据，计算总价，并实现了选择项的筛选功能。此外，还涉及了页面样式设计，如悬浮头部和底部结算按钮。
摘要由CSDN通过智能技术生成

先上实现图

 

 话不多说，直接上代码

cars.js 

// const arr = require("../../utils/data");
// pages/cars/cars.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: [],
    sumprice:0,
    check:false,
    allselect:false,
    count:0,
    i_num:0,
    i_price:0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let get =wx.getStorageSync('carInfo');
    this.setData({
      arr:get
    })
   
  },
  addNum(e) {
    if(this.data.allselect==true){
      console.log("1123365412563528758748549765453132168");
    }
    let {num} = e.currentTarget.dataset;
    console.log(num+1);
    num++;
    let {id} = e.currentTarget.dataset;
    this.data.arr.forEach((item, index) => {
      if (item.id == id) {
        item.num = num;
      }
    })
    wx.setStorageSync('carInfo', this.data.arr);
    this.setData({
      arr: wx.getStorageSync('carInfo'),
    })
    // this.sumprice()
  },
  delNum(e) {
    let newarr=[];
    let x=wx.getStorageSync('carInfo');
    // console.log(x);

    let {num} = e.currentTarget.dataset;
    // console.log(num-1);
    let goodsid = e.currentTarget.dataset.id;
    // let newcount = wx.getStorageSync('count');
    // console.log("商品编号"+goodsid+"减一");
    if(num>1){
      num--;
    }
     else{
       x.forEach((item,index)=>{
         if(item.id!=goodsid){
            newarr.push(item);
         }
       })
       let newcount = wx.getStorageSync('carInfo').length
       newcount--;
      //  wx.setStorageSync('count', newcount)
      //  let c = wx.getStorageSync('count');
       this.setData({
         count:newcount
       })
       
       wx.setStorageSync('carInfo', newarr);
       let a=wx.getStorageSync('carInfo');
       this.setData({
         arr:a
       })
      //  console.log(a);
    //  console.log(newarr);
    //  console.log(wx.getStorageSync('carInfo'));
    }
    let {id} = e.currentTarget.dataset;
    this.data.arr.forEach((item, index) => {
      if (item.id == id) {
        item.num = num;
      }
    })
    wx.setStorageSync('carInfo', this.data.arr);
    this.setData({
      arr: wx.getStorageSync('carInfo'),
    })
    let c =wx.getStorageSync('carInfo').length;
    wx.setStorageSync('count', c)
      let count2=wx.getStorageSync('count')
      wx.setTabBarBadge({
        index: 2,
        text: ""+count2+"",
      })
    // this.sumprice(e);
  },

empty(e){
  wx.clearStorageSync('carInfo');
  wx.reLaunch({
    url: '/pages/cars/cars',
  })
  
},
  selectall(e){
    let dataArr = this.data.arr.length;
    // console.log(dataArr);
    for(var i=0;i<dataArr;i++){
      var ischeck=this.data.arr[i].check;
      ischeck=!this.data.check;
      // console.log(ischeck+"单选");
    }
    if(this.data.allselect==ischeck){
      ischeck=true
      this.data.allselect=true
    }
    let on = true;
    //  计算合计
     let shopcar= wx.getStorageSync('carInfo');
     let sum=this.data.sumprice
     if(this.data.allselect==false){
          shopcar.forEach((item,index)=>{
          console.log(item.price*item.num); 
          sum+=item.price*item.num
       })
     }else{
       sum=0;
     }
     this.setData({
      sumprice:sum
    })
    if(ischeck==true && this.data.allselect==true ){
          ischeck=!this.data.allselect;
          // console.log(ischeck+"单选");
          this.setData({
            allselect:!on
          })
          // console.log(this.data.allselect+"这是全选的值");
    }
    this.setData({
      check:ischeck,
    })
    this.data.count=0;
    // console.log(this.data.allselect+"这是全选的值");
    console.log(ischeck+"这是单个复选框的值");
   

  },
  allon:function(e){
    let count=e.detail.value.length;
    // this.setData({
    //   count:count
    // })
    // console.log(count);
    let dataArr=this.data.arr.length;
    let on=true
    console.log("选中"+count+"个单选");
    console.log("缓存有"+dataArr+"个数据");
    // 判断选中，设置全选是否选中
    if(count==dataArr){
      this.setData({
        allselect:on,
      })
      console.log("全部选择了"+this.data.allselect);
    }
    else{
      this.setData({
        allselect:!on,
      })
      this.data.allselect=false
    }
    if(count==0){
      this.setData({
        check:false,
        allselect:false
      })
      this.data.check=false
      this.data.allselect=false
    }
   this.sumprice(e);
  },
  sumprice(e){
    // console.log(e.detail.value);
      //这里是计算合计的！！
      // console.log(e);
      let shopcar= wx.getStorageSync('carInfo');
      let sum=0
      shopcar.forEach((item,index)=>{
          e.detail.value.forEach((item2,index2)=>{
            if(item.id==item2){
              // console.log(item2);
              sum+=item.price*item.num
            }
          })
      })
      this.setData({
        sumprice:sum
      })
  },
  jiesuan(e){
    
    
  },

  skyOnclick(){
    console.log("click this");
    // wx.navigateTo 只能跳转到没有在 tabBar 上配置的页面
    wx.reLaunch({
      url: '../grapefruit/grapefruit',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 获取页面缓存
    var storage = wx.getStorageSync('carInfo');
    // this.data.arr.concat(storage);
    this.setData({
      arr: storage
    })
    console.log(this.data.arr);
    let c =wx.getStorageSync('carInfo').length;
      this.setData({
        count:c
      })

      wx.setStorageSync('count', c)
        let count2=wx.getStorageSync('count')
        wx.setTabBarBadge({
          index: 2,
          text: ""+count2+"",
        })
 
    console.log("购物车商品总数"+c);
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

 cars.wxml

<!--pages/cars/cars.wxml-->
<wxs module="filters" src="../cars/filter.wxs"></wxs>
<view class="car_content" >
    <view class="top" >
      <text style="font-size: 20px;">购物车<text style="font-size: 14px;">({{count}})</text></text>
      <text class="footer_text3" style="margin-left:30px; " bindtap="empty">清空购物车</text>
    </view>
    <view wx:if="{{arr.length==0?true:false}}" class="hide" >
      <view>
        <text style="color: rgb(199, 197, 197);">您的购物车空空如也\n</text>
        <view >
          <image bindtap="skyOnclick" class="tapimg1" src='../../imges/guangguang.png'></image>
          <text>\n</text>
        <text class="guangguang" bindtap="skyOnclick" style="color: rgb(255, 115, 35);">去逛逛</text>
        </view>
      </view>
    </view>
<checkbox-group  bindchange="allon">
  <!-- wx:if="{{item.num==0?false:true}}" -->
<view  wx:for="{{arr}}"  wx:key="id">
  
  <view class="car_item" >
    <view class="icon-small-wrp">
      <checkbox value="{{item.id}}" class="icon-small" bindtap="" checked="{{check}}"></checkbox>
      <!-- checked="true" -->
    </view>
    <view class="middle">
      <image class="shops" src="/imges/shop.png" />
      <text style="float: left;width: 200px;">{{item.shop}}<text style="color: rgb(190, 190, 190);">></text></text>
      <image class="goods" src="{{item.url}}" >  </image>  
      <view class="middle_text">
        <text style="color: rgba(255, 115, 21, 0.959);">{{item.names}}</text>
        <text style="width: 80px;background-color: rgb(233, 233, 233);color: rgb(151, 144, 144); border-radius:5px; ">
        {{item.desc}}▽
        </text>
      </view>
    </view>
    <!-- 加减运算 -->
    <view  class="box_footer" >
      <text  bindtap="delNum" data-num="{{item.num}}" data-id="{{item.id}}" class="reduce">一</text>
      <text class="addsubnum" >{{item.num}}</text>
      <text   bindtap="addNum" data-num="{{item.num}}" data-id="{{item.id}}" class="add">+</text>
    </view>
    <text  style=" margin-left: 5px;float: left; margin-top:25px;font-size: 14px;color: rgb(78, 78, 78);">￥:</text>
     <text style=" margin-left: 5px;float: left; margin-top:20px;color: orange;font-size: 20px;" >{{filters.toFix(item.num*item.price)}}</text>
  </view>
</view> 
</checkbox-group>
  <view class="footer"> 
    <!-- ({{count}}) -->
      <text class="footer_text1" bindtap="jiesuan">结算</text>
      <text class="footer_text2">合计:<text style="color: orange;">￥</text>
      <text class="footer_text2_1">{{filters.toFix(sumprice)}}</text> 
      </text>
      <view class="footer_check">
        <checkbox  checked="{{allselect}}" bindtap="selectall" ></checkbox>
         <text>全选</text>
      </view>
  </view>
<view style="width: 100%; height: 100px; text-align: center;">到底啦！</view>
</view>

 cars.wxss

/* pages/cars/cars.wxss */
page{
  background: rgb(240, 240, 240);
}
.car_item{
  background:white;
  margin: 0 auto;
  width: 87%;
  height: 150px;
  /* border: 2px solid rgb(137, 135, 235); */
  border-radius:10px;
  padding: 10px;
  margin-top: 10px;
  box-shadow: 5px 5px 5px rgb(185, 185, 185);
}
.box_check{
  float: right;
}
.top{
  background: rgb(255, 217, 0);
  position: sticky;
  top: 0px;
  height: 30px;
  z-index: 10000;
}
.footer_check{
  float: left;
  margin-top:8px ;
  margin-left: 15px;
}
.box_footer{
  /* font-size: 25px; */
  float: right;
  background:rgb(253, 116, 81);
  padding-left: 10px;
  padding-right: 8px;
  border: 1px solid rgb(192, 192, 192);
  border-radius: 5px;
}

.box_footer .text_footer1{
    font-size: 25px;
}
.box_footer .text_footer2{
  font-size: 20px;
}
.icon-small-wrp{
  
  display: flex;
  align-items: center;
  justify-content: center;

  float: left;
  /* border: 1px solid black; */
  height: 100%;
  line-height: 100%;
  width:15px;
}

.middle .goods{
  float: left;
  margin-top: 10px;
  width: 110px;
  height: 110px;
  margin-left: 5px;
  border-radius: 5px; 
}
.middle .shops{
  /* margin-top: 1px; */
  float: left;
  width: 20px;
  height: 20px;
}
.middle_text{
  margin-left: 15px;
  float: left;
  margin-top: 30px;
  width: 110px;
  
}
.box_footer{
  /* margin-top: 100px; */
  
  float: right;
  margin-top: 20px;
}
.box_footer .reduce{
  font-size: 14px;
  color: white;
}
.box_footer .add{
  font-size: 18px;
  color: white;
}
.box_footer .addsubnum{
  font-size: 18px;
  padding-left: 5px;
  padding-right: 5px; 
  background-color: white;
  margin-left: 7px;
  margin-right: 5px;
}

.footer{
  height: 40px;
  width: 100%;
  background: white;
  position: fixed;
  right: 0px;
  bottom: 0px;
  
}
.footer_text1{ 
  height: 30px;
  /* 文字居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: white;
  width: 70px;
  float: right;
  margin-right: 20px;
  border-radius: 15px;
  background: -webkit-linear-gradient(left,rgba(255, 146, 4, 0.945),rgb(255, 81, 0));
  /* border:0px solid orange ; */
  font-size: 15px;
  margin-top: 5px;
}
.footer_text2{
  font-size: 14px;
  float: right;
  margin-right: 20px;
  line-height: 40px;
}
.footer_text2_1{
  color: orange;
  font-size: 20px;
}
.footer_text3{
  text-align: center;
  width: 100px;
  float: right;
  color: white;
  border-radius: 15px;
  padding: 4px;
  margin-right: 10px;
  background: -webkit-linear-gradient(left,rgb(255, 125, 85),rgb(255, 49, 49));
}
checkbox .wx-checkbox-input{
  border-radius: 50%;/* 圆角 */
  width: 46rpx; /* 背景的宽 */
  height: 46rpx; /* 背景的高 */
}
/* 选中后的 背景样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border: 1rpx solid #f3333e;
  background: #f3333e;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  border-radius: 50%;/* 圆角 */
  width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 40rpx;
  text-align: center;
  font-size:30rpx; /* 对勾大小 30rpx */
  color:#fff; /* 对勾颜色 白色 */
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}
.tapimg1{  
  width:140px;
  height: 140px;
}
.hide{
   height: 300px;
   /* line-height: 500px; */
   margin-top: 100px;
   text-align: center;

}
.guangguang{
  margin-top: 10px;
  border: 2px solid  rgb(255, 115, 35);
  border-radius: 50px;
  padding-left:30px;
  padding-right:30px;
  padding-top: 10px;
  padding-bottom: 10px;
}

 filter.wxs // 这是在文件夹里新建的保留两位小数用的

var filters = {   
  toFix: function (value) {      

     return value.toFixed(1) // 此处2为保留两位小数，保留几位小数，这里写几   

 },

  toStr: function (value) {      

     return value.toString()

 },

  toNum: function (value) {      

     return value.toNumber()

 },

}

module.exports = {  

  toFix: filters.toFix,

  toStr: filters.toStr,

  toNum: filters.toNum,//暴露接口调用

}

 classification.js

Page({
  data: {
    product_list:[
      {
      id:1001,
      names:"西瓜",
      url:"/imges/fruit/xigua.png",
      desc:"麒麟瓜-5斤",
      shop:"每天吃瓜",
      price:49.9,
      num:1,
    },
    {
      id:1002,
      names:"荔枝",
      url:"/imges/fruit/lizhi2.png",
      desc:"妃子笑-2斤",
      shop:"荔即享用",
      price:30.3,
      num:1,

    },
    {
      id:1003,
      names:"芒果",
      url:"/imges/fruit/mango.png",
      desc:"鸡蛋芒-1斤",
      shop:"芒来忙去",
      price:9.5,
      num:1,

    },
    {
      id:1004,
      names:"橙子",
      url:"/imges/fruit/orange.png",
      desc:"脐橙-2斤",
      shop:"橙天想你",
      price:21.2,
      num:1,
    },
    {
      id:1005,
      names:"杨桃",
      url:"/imges/fruit/yangtao.png",
      desc:"杨桃一箱",
      shop:"杨与桃",
      price:50.5,
      num:1,
    },
    {
      id:1006,
      names:"菠萝",
      url:"/imges/fruit/boluo.png",
      desc:"菠萝-三颗",
      shop:"菠",
      price:29.9,
      num:1,
    },
    {
      id:1007,
      names:"葡萄",
      url:"/imges/fruit/putao.png",
      desc:"葡萄-2斤半",
      shop:"葡天盖地",
      price:63.4,
      num:1,
    }
    ],
    swipeArr: [
      '/imges/fruit/dianpuhaibao2.png',
      '/imges/fruit/dianpuhaibao3.png',
      '/imges/fruit/guanggao1.png'
    ],
    menuArr: [
      {"id": 0,
        "title": "今日特价",
        "subArr": [
          {
            "imgSrc": "/imges/fruit/lizhi2.png",
            "imgDesc": "新鲜荔枝",
          },
          {
            "imgSrc": "/imges/fruit/xigua.png",
            "imgDesc": "自种西瓜",
          },
          {
            "imgSrc": "/imges/fruit/mango.png",
            "imgDesc": "海南金煌芒",
          },
          {
            "imgSrc": "/imges/fruit/orange.png",
            "imgDesc": "甜橙",
          }
        ],

      },
      {"id": 1,
        "title": "全城热卖",
        "subArr": [{
            "imgSrc": "/imges/fruit/yangtao.png",
            "imgDesc": "新鲜杨桃",
          },
          {
            "imgSrc": "/imges/fruit/boluo.png",
            "imgDesc": "自种植菠萝",
          },
          {
            "imgSrc": "/imges/fruit/putao.png",
            "imgDesc": "巨峰葡萄",
          }
        ]
      },
      {"id": 2,
        "title": "会员专享",
        "subArr": [{
          "imgSrc": "/imges/fruit/yangtao.png",
          "imgDesc": "新鲜杨桃",
        },
        {
          "imgSrc": "/imges/fruit/boluo.png",
          "imgDesc": "自种植菠萝",
        },
        {
          "imgSrc": "/imges/fruit/putao.png",
          "imgDesc": "巨峰葡萄",
        }
      ]
      },
      {"id": 3,
        "title": "减脂专区",
        "subArr": [{
          "imgSrc": "/imges/fruit/yangtao.png",
          "imgDesc": "新鲜杨桃",
        },
        {
          "imgSrc": "/imges/fruit/boluo.png",
          "imgDesc": "自种植菠萝",
        },
        {
          "imgSrc": "/imges/fruit/putao.png",
          "imgDesc": "巨峰葡萄",
        }
      ],
      
      },
      // {
      //   "id": 4,
      //   "title": "鲜榨果蔬汁",
      //   "subArr": [{
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "NFC鲜榨橙汁"
      //     },
      //     {
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "NFC鲜榨西柚汁"
      //     },
      //     {
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "猕猴桃复合果汁"
      //     }
      //   ]
      // },
      // {
      //   "id": 5,
      //   "title": "经典饮品",
      //   "subArr": [{
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "巧克力"
      //     },
      //     {
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "纯牛奶"
      //     }
      //   ]
      // },
      // {
      //   "id": 6,
      //   "title": "健康轻食",
      //   "subArr": [{
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "京味烤鸭鲜蔬卷"
      //     },
      //     {
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "夏威夷菠萝火山卷"
      //     },
      //     {
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "火腿芝士羊角"
      //     },
      //     {
      //       "imgSrc": "/images/menu/1-1.jpg",
      //       "imgDesc": "鸡肉卷"
      //     }
      //   ]
      // }
      
    ],

    
    // 
    leftId: "left0",
    rightId: "right0",
    lifeActiveNum: 0,
    heightArr: []
  },
  leftClick(e) {
    this.setData({
      lifeActiveNum: e.target.dataset.myid,
      leftId: "left" + e.target.dataset.myid,
      rightId: "right" + e.target.dataset.myid
    })

  },
  // vue中的mounted也没有说白分白的组件熏染完成
  onReady() {
    let _this = this
    setTimeout(() => {
      let initArr = [0]; //初始数组
      let initNum = 0; //初始数值
      const query = wx.createSelectorQuery()
      query.selectAll('.rightblock').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function (res) {
        // console.log(res[0]);
        res[0].map(val => {
          initNum += val.height; //实现高度的累加
          initArr.push(initNum) //初始数值加进数组中
        })
        // console.log(initArr); //拿到每一个height  存起来
        _this.setData({
          heightArr: initArr
        })
      })
    }, 300)
  },
  // 右边滚动事件
  rightScrollTop(e){
    let st=e.detail.scrollTop;
    let myarr=this.data.heightArr;
    for(let i=0;i<myarr.length;i++){
      if(st>=myarr[i]&&st<myarr[i+1]-10){
        this.setData({
          leftId:"left"+i,
          lifeActiveNum:i
        })
        return;
      }

    }
  } ,
  addCar(e){
    console.log(e);
    // 添加【设置】缓存
    // wx.setStorageSync('key', data)
    // wx.setStorage(option)
    // 获取缓存
    // wx.getStorageSync('key',data)
    // wx.getStorage(option)
    
    // 将商品项数据添加到缓存当中
    let {id} = e.currentTarget.dataset;

    // let {price} =e.currentTarget.dataset;
  
    // wx.setStorageSync('url', url)
    console.log(id);
    
    // console.log(url);
    // console.log(this.data.productData);
   
    // productData=this.data.product_list.names 
  var i=false
  // let count=this.data.count;
   if(wx.getStorageSync('carInfo')){
    var productData = wx.getStorageSync('carInfo');
      productData.forEach((item1)=>{
      console.log(item1);
      if(item1.id==id){
        item1.num++
        i=true;
      }
    })
    if(!i){
      this.data.product_list.forEach((item,index)=>{
        if(item.id == id){
          productData.push(item);
          // count++;
          // this.setData({
          //   count:count
          // })
        }
       })
    }
   }else{
     wx.setStorageSync('carInfo',[])
     var productData = wx.getStorageSync('carInfo');
     this.data.product_list.forEach((item,index)=>{
         if(item.id == id){
       productData.push(item);
       }
    })
   }
  //  wx.setStorageSync('count',count);
  //  console.log(count);
   wx.setStorageSync('carInfo', productData);
   let c =wx.getStorageSync('carInfo').length;
      wx.setStorageSync('count', c)
        let count2=wx.getStorageSync('count')
        wx.setTabBarBadge({
          index: 2,
          text: ""+count2+"",
        })
  },
  onShow() {
    let c =wx.getStorageSync('carInfo').length;
      wx.setStorageSync('count', c)
        let count2=wx.getStorageSync('count')
        wx.setTabBarBadge({
          index: 2,
          text: ""+count2+"",
        })

  }

})

classification.wxml

<!-- 轮播图 -->
<banner-block swipeArr="{{swipeArr}}" />

<view class="main">
  <!-- 左边导航栏 -->
  <scroll-view scroll-y="true" scroll-into-view="{{leftId}}" class="left">
    <view wx:for="{{menuArr}}" wx:key="*this" data-myid="{{item.id}}" id="left{{item.id}}" class="scroll-view-item  {{lifeActiveNum==item.id?'active':''}}  "  bindtap="leftClick">
    {{item.title}}
      </view>
  </scroll-view>
  <!-- 右边 -->
  <scroll-view scroll-y="true" class="right" scroll-with-animation="true" bindscroll="rightScrollTop" scroll-into-view="{{rightId}}"
  >
    <view wx:for="{{menuArr}}" wx:key="*this" id="right{{item.id}}" class="scroll-view-item rightblock "  >
      <view class="right_title" >{{item.title}}</view>
      <view class="right-flex" >
      <!-- <view class="content" wx:for="{{item.subArr}}" wx:key="*this">
        <image class="right_images" src="{{item.imgSrc}}" ></image>
        <text style="font-size: 14px; font-weight: 700;">{{item.imgDesc}}</text>
        <text class="text1" style="width: 150px; font-size: 14px; color: rgb(92, 92, 92);">{{item.desc}}</text>
        <text class="text2" style="color: rgb(255, 38, 0);">￥</text>
        <text class="text3" style="font-size: 18px; color: rgb(255, 38, 0);">{{item.price}}</text>
        <text class="lijiqiang" bindtap="addCar" >立即抢</text>
        <text class="line"></text>
      </view> -->
      <view class="content">
        <view class="product_item" wx:for="{{product_list}}" wx:key="id">
          <image class="right_images" src="{{item.url}}" >  </image>  
          <text style="font-size: 14px; font-weight: 700;margin-top: 5px; margin-bottom: 5px;">品种：{{item.names}}</text>
          <text class="text1" style="width: 150px; font-size: 14px; color: rgb(92, 92, 92);">{{item.desc}}</text>
          <text class="text2" style="color: rgb(255, 38, 0);">￥</text>
          <text class="text3" style="font-size: 18px; color: rgb(255, 38, 0);">{{item.price}}</text>
          <button class="lijiqiang"  size="mini" bindtap="addCar" data-id="{{item.id}}">
          立即抢</button>
          <text class="line"></text>
        </view>
      </view>
      
    </view>
    </view>
  </scroll-view>
</view>

 classification.wxss


.main {
  background: #efefef;
  /* height: 100%; */
  height: calc(100vh - calc(100vw/1080*520));
  width: 100vw;

}

.left {
  width: 25%;
  float: left;
  /* border-right: 1px solid #666; */
  background-color: rgb(230, 230, 230);
  height: 700px;
  /* height: calc(100vh - calc(100vw/1080*520)); */
  box-sizing: border-box;
}


.left view{
  /* border-bottom: 1rpx solid #666; */
  /* background: rgb(235, 235, 235); */
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  position: relative;
}
.left view.active{
  background-color: #fff;
}


.left view::before{
  content: '';
  background: rgb(230, 230, 230);
  /* border-left: 8rpx; */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 8rpx;
}
.content .right_images{
  border-radius: 5px;
  height: 90px;
  width: 90px;
}
.left view.active::before{
  background: #ff9102;
}

.right{
  background-color: #fff;
  float: right;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 75%;
  height: 700px;
  padding: 0  10rpx;
  /* background: #efefefef; */
  box-sizing: border-box;
  /* height: calc(100vh - calc(100vw/1080*520)); */
}
 .right  .title{
  height: 40rpx;
  line-height: 40rpx;
  
}
.content {
  background: #fff;
  width: 270px;
  
  padding: 10rpx;
  box-sizing: border-box;
  /* text-align: center; */
  margin-top: 10rpx;
  /* border: 1px solid black; */
}
.content  image{
  /* border: 1px solid black; */
  float: left;
  width: 90px;
  height: 90px;
  margin-right: 8px;
}
 .line{
  /* margin: 0 auto; */
  width: 250px;
  border-top: 1px solid rgb(204, 204, 204);
  margin-bottom: 10px;
  margin-top: 8px;
}


.content  text{
  /* border: 1px solid black; */
  float: left;
  /* text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap; */
}
.right-flex{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.right_title{
  text-align: center;
  border-radius: 5px;
  height: 60rpx;
  line-height: 60rpx;
  width: 75px;
  color: white;
  background-color: #ff9102;
  margin-top: 5px;
}
.content .text2{
  font-size: 14px;
  position: relative;
  top: 32px;
}
.content .text3{
  position: relative;
  top: 28px;
}
.content .lijiqiang{
  width: 80px;
  height: 25px;
  line-height: 25px;
  border-radius: 25px;
  font-size: 15px;
  margin-top: 30px;
  float: right;
  /* position: relative;
  bottom: -29px;
  right: -28px; */
  /* border: 1px solid black; */
  text-align: center;
  background-color: rgb(255, 0, 64);
  color: white;
  box-shadow: 1px 1px 5px  gray;
}

        参考的左侧导航栏链接： 

微信小程序侧边导航栏 - 简书废话少说，其实就是利用scroll-into-view的id值来进行视图进行的滚动，注意不是选项卡效果，是页面的滚动的效果，相当于html的锚点链接效果。效果： html代码...https://www.jianshu.com/p/8c9107f3dbcc

Mengxy灬
关注
微信小程序 - 最新详细实现 “左侧菜单，右侧内容“ 左右联动商品分类页面，左边是导航分类右侧是自定义内容，左侧分类菜单，右侧列表双向联动效果，左右二级联动，仿京东淘宝商城分类页面、美团外卖点餐界面！
王佳斌
07-23 3343
微信小程序，vue2，vue3，左右联动菜单，商品分类页面，左分类右列表，小程序实现左侧菜单，右侧列表双向联动效果，侧边菜单和右边滚动条，电商项目，点击菜单子分类联动对应商品，分类左右联动，上拉加载以及下拉刷新，右侧列表双向联动，商品分类左右联动，scroll-view，锚点，点击左侧大类后侧列表跟着变跟着刷新，微信小程序实现菜单左右联动效果，左菜单 右边列表数据，左侧菜单,右侧列表双向联动效果，右侧商品滑动时，左侧分类导航栏的相应分类被选中，商城分类滚动列表锚点(左菜单右列表)，美团外卖，京东商城，淘宝商
微信小程序左侧竖形滑动菜单（仿淘宝分类界面）
憨虫子的博客
05-24 8100
界面如下： 1、category.js中data初始化的数据（模拟），如果是跟后台数据库挂钩，可以用wx.request请求返回相似的对象数组再绑定到cartItems中。 data: { cateItems:[ { cate_id:1, cate_name:'洗护', children: [ { ...
微信小程序生成二维码
zhao97的博客
02-22 330
项目中需要把字符串转换成二维码展示，用到了生成二维码工具weapp-qrcode.js （demo的众多文件中只需将util下的这个文件拷贝到自己项目中），可在原文地址里clone demo。 1. 在wxml页面中写一个绘制二维码的canvas <canvas class='canvas' canvas-id='canvas'></canvas> 2. 页面js中引入 var QRCode = require('../../../utils/weapp-qrcode.js');
小程序基本命令
aiven1637的博客
10-30 3340
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
侧边导航，左右两边联动
最新发布
qq_51354326的博客
09-30 291
这是在子组件中，在attached中调用方法，因为我在父组件用了两个子组件切换展示，另一个不需要获取高度，只有attached中调用不报错，created中获取不到，ready中调用会在展示另一个子组件时报错，获取不到高度。实现效果：左侧是导航，右边根据点击导航滚动到指定位置，右侧滚动到某个位置，左侧也要跟着变化。使用的是原生微信小程序，使用了vant-weapp的侧边导航组件。
webSocket用法
weixin_34144450的博客
08-15 174
在做项目的时候，需要后台向前端推送消息的功能。在这个项目中我使用的是webSocket这个新的浏览器API.webSocket的目标是在一个单独的持久连接上提供全双工，双向通信。Web Sockets 使用了自定义的协议，所以 URL 模式也略有不同。未加密的连接不再是 http://， 而是 ws://;加密的连接也不是 https:/...
微信小程序链接mysql数据库
weixin_35752645的博客
01-12 774
微信小程序可以通过调用后端 API 来链接 MySql 数据库。在小程序端使用 wx.request 或 wx.cloud.callFunction 等 API 发起请求，在后端使用 Node.js 和一个数据库连接库(如mysql2)来操作数据库。 ...
微信小程序抽奖-翻牌
weixin_34130389的博客
08-30 1554
背景 ps：本次开发基于wepy框架 由于最近接到一个需求--抽奖活动； 翻牌打乱活动抽奖活动，大概需求是这样的，九宫格卡牌，先正面展示所有奖品，然后卡牌翻转，打乱排序，点击卡牌，然后抽奖。 这个需求本身其实不难，主要是分为三步； 展示所有卡牌，然后翻转。 打乱所有卡牌 点击其中一张卡牌，抽奖 第一步：卡牌翻转 我们先在dom中渲染9个卡牌。 <view class="card-modu...
微信小程序点击左侧分类导航，当前选中的项滚动到分类导航中间
qq_38337245的博客
03-04 2370
先看效果图吧（点击标题5自动滚动到中间）： 我研究出最简单的做法，会有瑕疵，点击的项滚动到中间不是很正中间，原因是根据屏幕的高度定制滚动间隔个数，或者是每个分类项高度误差影响不是很完美，但是至少简单能用，自己调整就可以用了，上代码： 1. shopCar.wxml <view class="container"> <!--左侧分类导航 ： 首先使用相对定位将导航固定在页面左边，如果有头部导航和底部导航的需要自己计算各个的高度再定位分类导航， .
微信小程序实现商城分类,点击左侧滚动到相应区域,滚动右侧高亮左侧导航(scroll-view)
lllcuigu的博客
01-17 1244
【代码】微信小程序实现商城分类,点击左侧滚动到相应区域,滚动右侧高亮左侧导航(scroll-view)
uniapp微信小程序实现《优购商城项目》
qq_64102392的博客
06-14 4783
对于跨平台开发来说，节约成本是最主要的目的，相比较其他框架，觉得uniapp上手的成本是比较低的。
干货！微信小程序通过NodeJs连接MySQL数据库
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
04-17 5092
在前后端+数据库架构的思维中，微信小程序的生态地位是充当前端，后端和数据库还需开发者另外准备。微信开放社区提供强悍的云函数、云数据库、CMS内容管理，无疑为开发小程序的功能提供了不少便捷。当我们在开发PC端的系统时，常见的SSM框架或者SpringBoot混合Vue，使用的数据库多为MySQL，这时如果我们想开发一套多端同步的系统，使用云开发会导致数据无法同步到PC端。因此一个解决方案是：微信小程序也使用MySQL作为数据库。
微信小程序开发之连接本地MYSQL数据库
MamatjanPC的博客
05-04 3万+
微信小程序开发时通过搭建本地服务器，连接本地数据库。
微信小程序使用Echarts
weixin_38999134的博客
05-07 546
下载 下载echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin 拷贝文件 ec-canvas目录 放在小程序项目目录中 在页面开启使用echarts { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } 引入 import * as ...
微信小程序中使用echarts
ColdCoder的博客
09-16 2万+
体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo： 下载 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载gitHub项目。 其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。 ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版
微信小程序实现城市索引选择+搜索
aaa123aaasqw的博客
05-11 1102
当前选中位置高度Height=pageY-侧边栏本身距离左上角高度（res.windowWidth / 750 * 180 （rpx，该高度为top：180rpx））搜索城市时，隐藏其他数据，根据搜索值去匹配（indexOf）去匹配关键字，将结果push到一个新的数组中，展示该数组数据。为列表中的字母索引添加相应id，当触摸右侧固定侧边栏时候，动态设置当前id值，实现锚点定位。设置哪个方向可滚动，则在哪个方向滚动到该元素。当触摸开始，移动时，拿到pageY，距离左上角的高度。
微信小程序连接MySQL数据库
热门推荐
sx17860543449的博客
10-27 6万+
微信小程序连接MySQL 简要说明： 承接上一个商品列表页，在服务器端连接MySQL数据库，通过条件匹配查寻数据并显示在客户端 准备工作 1、node.js 2、微信开发者工具 3、MySQL数据库 MySQL配置数据库、数据表 通过可视化的Workbench，可以很容易的建立自己的数据库、数据表。这里直接截个图就好了 推荐一个工具 Navicat for MySQL,以后可以通过它连接自己的数据库 目录结构 客户端代码实现 index.wxml (变化不大，加了个跳转按钮） <
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值