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

Mengxy灬

已于 2022-06-01 21:40:03 修改

阅读量3.5k

点赞数 3

文章标签：微信小程序小程序 javascript

于 2022-06-01 21:38:58 首次发布

本文链接：https://blog.csdn.net/qq_47548037/article/details/125090657

版权

先上实现图

话不多说，直接上代码

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灬

关注

3
点赞
踩
110

收藏

觉得还不错? 一键收藏
1
评论
微信小程序购物车和左侧导航栏

微信小程序实现左侧导航栏加入购物车并结算 cars.wxml cars.wxss filter.wxs // 这是在文件夹里新建的保留两位小数用的 classification.jsclassification.wxml classification.wxss 参考的左侧导航栏链接：微信小程序侧边导航栏 - 简书废话少说，其实就是利用scroll-into-view的id值来进行视图进行的滚动，注意不是选项卡效果，是页面的滚动的效果，相当
复制链接

扫一扫