小程序侧边栏左右联动

其他 2020-08-04 11:19:53 阅读次数: 0 
<view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{cakeTypesTitle}}" wx:for-item="classify" wx:key="*this" data-id="{{classify.id}}" bindtap="tapClassify">
  <view class="name">{{classify.name}}</view>
</view>

<view wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="*id" style="border-bottom:1rpx solid #f5f5f5" wx:for-index="index">
  <!-- 滚动到表题的位置 -->
  <view style="height:30px;" id="{{'inToView'+classify.id}}">{{classify.name}}</view>
  <view class="goods" wx:for="{{classify.goods}}" wx:for-item="cake"  wx:for-index="indexx">
    <view>
      <image src="{{cake.images}}" catchtap='toDetails' data-goods_id="{{cake.goods_id}}"></image>
    </view>
    <view class="good-info" style="display:flex;flex-direction:column;justify-content:space-between;width:100%">
      <view class="goods-name" catchtap='toDetails' data-goods_id="{{cake.goods_id}}"> {{cake.goods_name}}</view>
      <view style="display:flex;width:100%;justify-content:space-between;">
       <view class="goods-price">￥{{cake.spec[0].goods_price}}</view>
      <view slot="footer" class="jiajian">

        <view catchtap='onsub' class="sub" data-goods_sku_id="{{cake.spec[0].spec_sku_id}}" data-goods_id="{{cake.goods_id}}" data-index="{{index}}" data-indexx="{{indexx}}" data-values="{{cake.count}}">-</view>
        <input value="{{cake.count}}" type="nummber" class="goods-num" min="0" max="{{cake.spec[0].stock_num}}" disabled="true"></input>
        <view catchtap='onplus' class="plus" data-goods_sku_id="{{cake.spec[0].spec_sku_id}}" data-goods_id="{{cake.goods_id}}" data-index="{{index}}" data-indexx="{{indexx}}" data-values="{{cake.count}}">+</view>
      </view>
      </view>
     

    </view>

  </view>
</view>

/goods/
.content-container{
display: flex;
}
.classify-container{
flex:1;
height: 80vh;
text-align: center;
/* border:solid 1px orange; /
}
/ /
.classify{
/ border:solid 1px blue; /
/ line-height: 40px; /
padding-top:15rpx;
/ padding-bottom: 15rpx; /
}
.active{
color:red;
font-weight: 600;
}
.goods-container{
flex:3.8;
height: 90vh;
/ border:solid 1px red; /
}
.goods{
min-height: 100px;
margin-bottom: 30rpx;
display: flex;
width:100%;
position: relative;
align-items:center;
/ background:orange; /
/ border-bottom:1rpx solid #f5f5f5; /
/ padding-bottom:10rpx; */
}

.goods-name{
margin-bottom: 20rpx;
/*关键属性（必须有的） */
display: -webkit-box;
/*规定子元素的排列方向 */
-webkit-box-orient: vertical;
/*限制文本显示的行数 */
-webkit-line-clamp:2;
/*实现多余的文字隐藏并用省略号来代表被隐藏的文字 */
overflow: hidden;
text-overflow:ellipsis;
}
.goods image{
width: 150rpx;
height:150rpx;
margin-right:10rpx
}

// let App = getApp();
// Page({

// /**
// * 页面的初始数据
// */
// data: {
// goods_list: [],
// curNav: 0, //当前项ID
// curIndex: 0 ,//当前项
// height:0,

// curNav: 0,
// curIndex: 0,

// rigId:0,
// classfiySelect:0,
// height:0,
// heightArr: 0,
// classfiySelect: “”,
// leftText: [
// // {
// // id: “01”,
// // text1: “标题1”,
// // img_url: “http://img4.imgtn.bdimg.com/it/u=3209370120,2008812818&fm=26&gp=0.jpg”,
// // },

// ],
// rightData: [
// // {
// // id: “01”,
// // title: “内容1”,
// // frist: [{
// // url: “https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2018939532,1617516463&fm=26&gp=0.jpg”,
// // text: “文字说明1”,
// // },
// // {
// // url: “https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2018939532,1617516463&fm=26&gp=0.jpg”,
// // text: “文字说明2”,
// // },

// // ],

// // },
// ],

// text: ‘’,
// fromDetail:false

// },
// //事件处理函数
// switchRightTab: function(e) {

// // 获取item项的id，和数组的下标值
// let id = e.target.dataset.id,
// index = parseInt(e.target.dataset.index);

// // 把点击到的某一项，设为当前index
// this.setData({
// curNav: id,
// curIndex: index,

// })

// },
// /**
// * 生命周期函数–监听页面加载
// */
// onLoad: function(options) {
// var sysInfo = wx.getSystemInfoSync();

// },

// /**
// * 生命周期函数–监听页面初次渲染完成
// */
// onReady: function() {

// },

// /**
// * 生命周期函数–监听页面显示
// */
// onShow: function() {
// this.getAnnouncement()

// this.getCartList()
// this.getPrice()

// if(this.data.fromDetail==false){
// this.getLeftData()
// }

// },
// /** 购物车列表 */
// getCartList: function() {
// let that = this;
// App._post(‘category/getGoodsList’, {}, function(result) {

// that.setData({
// rightData: result.data,
// curNav: result.data[0].id,
// curIndex:0
// })

// });
// },
// // 初始化价格
// getPrice() {

// let that = this;
// App._post(‘cart/getCartLists’, {}, function(result) {
// that.setData({
// order_total_price: result.data.order_total_price,
// num: result.data.order_total_num
// })
// });
// },
// /**
// * 生命周期函数–监听页面隐藏
// */
// onHide: function() {

// },

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

// },

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

// },

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

// },

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

// },

// chooseType(e) {
// let id = e.currentTarget.dataset.id;
// let index = e.currentTarget.dataset.index;
// this.setData({
// contentActive: id,
// navActive: index
// })

// },

// onplus: function(e) {

// var cur = parseInt(e.currentTarget.dataset.indexx)
// let that = this,

// index = parseInt(e.currentTarget.dataset.index),
// goodsSkuId = e.currentTarget.dataset.goods_sku_id,
// goods = that.data.rightData[index].goods[cur],

// order_total_price = that.data.order_total_price;
// console.log(goods, order_total_price,’++++++++++++’)
// if (goods.count > goods.spec[0].stock_num) {
// return
// }
// wx.showLoading({
// title: ‘加载中’,
// mask: true
// })
// App._post(‘cart/add’, {
// goods_id: e.currentTarget.dataset.goods_id,
// goods_num: 1,
// goods_sku_id: goodsSkuId,
// }, function(result) {
// var num = parseInt(that.data.num) + 1
// var count = goods.count+1
// goods.count = count;
// var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
// that.setData({
// [‘rightData[’ + index + ‘].goods[’ + cur + ‘]’]: goods,
// // order_total_price:money,
// // num: num
// });
// that.getPrice()
// });

// },
// mathadd: function(arg1, arg2) {
// return (Number(arg1) + Number(arg2)).toFixed(2);
// },
// onsub: function(e) {

// var cur = parseInt(e.currentTarget.dataset.indexx)
// let that = this,
// index = parseInt(e.currentTarget.dataset.index),
// goodsSkuId = e.currentTarget.dataset.goods_sku_id,
// goods = that.data.rightData[index].goods[cur],
// order_total_price = that.data.order_total_price;
// console.log(goods, order_total_price, ‘----------’)
// if (goods.count == 0 || e.currentTarget.dataset.value == 0) {

// return
// }
// wx.showLoading({
// title: ‘加载中’,
// mask: true
// })
// App._post(‘cart/sub’, {
// goods_id: e.currentTarget.dataset.goods_id,
// goods_sku_id: goodsSkuId,
// }, function(result) {
// wx.showLoading({
// title: ‘加载中’,
// mask: true
// })

// goods.count–;
// var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
// var num = that.data.num - 1
// goods.count >= 0 &&
// that.setData({
// [‘rightData[’ + index + ‘].goods[’ + cur + ‘]’]: goods,
// order_total_price: money,

// });
// that.getPrice()
// wx.hideLoading();
// });
// },
// mathsub: function(arg1, arg2) {
// console.log((Number(arg1) - Number(arg2)).toFixed(2))
// return (Number(arg1) - Number(arg2)).toFixed(2);
// },

// onSubmit: function(e) {
// if (this.data.num == 0) {
// App.showError(‘请至少选择一个商品’);
// return;
// }
// wx.navigateTo({
// url: ‘/pages/cart/checout?type=cart’
// })
// },

// //滚动触发
// scroll: function (e) {
// var scrollTop = e.detail.scrollTop,
// h = 0,
// classfiySelect;
// var that = this;

// that.data.leftText.forEach(function (clssfiy, i) {
// var _h = that.length(clssfiy[‘id’]);

// if (scrollTop >= h) {
// classfiySelect = clssfiy[‘id’];
// }
// h += _h;
// that.setData({
// curIndex: i,
// })
// })

// that.setData({
// classfiySelect: classfiySelect,
// })
// },
// //求每一栏高度
// length: function (e) {
// var query = wx.createSelectorQuery();
// //选择id
// var that = this;
// var rightData = that.data.rightData;
// var heightArr = [];
// for (var i = 0; i < rightData.length; i++) {
// if (rightData[i][‘id’] == e) {
// query.selectAll(’.listHeight’).boundingClientRect(function (n) {
// var s = 0;
// n.forEach((res) => {
// s += res.height;
// heightArr.push(s)
// });
// var arr1 = heightArr;
// var arr2 = [];
// arr2.push(arr1[0]);
// for (var j = 1; j <= arr1.length - 1; j++) {
// arr2.push(arr1[j] - arr1[j - 1])
// }

// that.setData({
// heightArr: arr2
// })
// }).exec()
// return that.data.heightArr[i]
// }
// }
// },
// //点击左边事件
// left_list: function (e) {
// var that = this;
// var l_id = e.currentTarget.dataset.id;
// var index = parseInt(e.target.dataset.index);
// that.setData({
// rigId: l_id,
// classfiySelect: l_id,
// curIndex:index
// })

// },
// getLeftData() {
// var that = this
// App._post(‘category/getCatelist’, {}, function (result) {

// that.setData({
// leftText: result.data.categorydata,

// })
// var sysInfo = wx.getSystemInfoSync();
// that.setData({
// classfiySelect: that.data.leftText[0].id,
// screenHeight: sysInfo.windowHeight
// })

// that.length(‘06’)
// });
// },

// toDetails(e){
// wx.navigateTo({
// url: ‘/pages/goods/index?goods_id=’+e.currentTarget.dataset.goods_id,
// })
// },

// //获取通告消息
// getAnnouncement() {
// let that = this
// var screenW = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
// App._post(‘user/getNotice’, {}, res => {
// if (!res.data.content){
// return
// }
// that.setData({
// text:res.data.content
// })

// })
// },

// onChange(value) {
// console.log(value);
// // Toast.loading({ forbidClick: true });

// setTimeout(() => {
// // Toast.clear();
// this.setData({ value });
// }, 500);
// },

// onHide() {
// this.setData({
// fromDetail: false
// })
// }

// })

//index.js
//获取应用实例
let App = getApp();

var scrollTimer
Page({
data: {
classifySeleted: ‘1’, //默认为第一个
cakeTypesTitle: [
{
typeId: 1,
typeName: ‘第一’
},],
cakeTypes: [
{
typeName: ‘第一’,
typeId: 1,
productIds: [{
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}]
},

],
typeIndex:0,
titleItemH:[],
fromDetail:false,
goods_list:[],
show:false,
order_total_price:0,
height:0,
 num:0

},
onLoad:function(){
this.setData({
height: wx.getSystemInfoSync().windowHeight
})

console.log('onLoad')

},
onShow: function () {
console.log(‘onShow’)
this.getCartList()
console.log(‘ggggggggggggggggggggg’)
//这里先默认标题高度为30 item高度为100
this.getPrice()

this.getAnnouncement()
    if(this.data.fromDetail==false){
      this.getLeftData()
}

},
onGoodsScroll: function (e) {
let self = this
if (scrollTimer) {
clearTimeout(scrollTimer)
}

//e.detail.scrollTop 滚动距离
var scrollTop = e.detail.scrollTop;
var h = 0;
//左边菜单那个要亮 点个全局变量classifySeleted 根据滚动高度去置换它，决定哪边亮
var classifySeleted = this.data.classifySeleted;
// 当前元素 当前元素的索引值 这个cakeTypes是右边的数据


this.data.titleItemH.forEach(function (classify, i) {

 
  //标题高度+加整个元素的高度
  var _h = classify.titleItemH;
 
  // 这可通过调节高度决定滚到哪里
  if (scrollTop >= h - 10) {
    classifySeleted = classify.id;
  }
  //得到所有的高度
  h += _h;
});

// this.setData({
//   classifySeleted: classifySeleted
// });
//isTap只是判断它是否点击过
if (this.data.isTap) {
  this.setData({
    isTap: false,
    classifySeleted: classifySeleted
  })
} else {
  this.setData({
    classifySeleted: classifySeleted
  });
}

},

tapClassify: function (e) {

let id = e.currentTarget.dataset.id
this.setData({
  isTap: true,
  classifySeleted: id,
  typeIndex: id
});

},

// /** 购物车列表 */
getCartList: function() {
let that = this;
App._post(‘category/getGoodsList’, {}, function(result) {

  // that.setData({
  //   cakeTypes: result.data,
  //   // curNav: result.data[0].id,
  //   // curIndex:0
  // })
  let titleItemH = []
  for (let i = 0; i < result.data.length; i++) {
    let titleH = 30
    let itemH = result.data[i].goods.length * 100
    let dd = {}
    dd.id = result.data[i].id
    dd.titleItemH = titleH + itemH
    titleItemH.push(dd)
  }
 
  that.setData({
    titleItemH: titleItemH,
    cakeTypes: result.data,
  })

});

},
getLeftData() {
var that = this
App._post(‘category/getCatelist’, {}, function (result) {

  that.setData({
    cakeTypesTitle: result.data.categorydata,
    classifySeleted: result.data.categorydata[0].id,
  })
 
});

},
// // 初始化价格
getPrice() {
console.log(this.data.order_total_price, ‘ffffffffffffffffff’)
let that = this;
App._post(‘cart/getCartLists’, {}, function(result) {
console.log(result.data.order_total_price,‘ffffffffffffffffff’)
that.setData({
order_total_price: result.data.order_total_price,
num: result.data.order_total_num
})
});
},

// //获取通告消息
getAnnouncement() {
let that = this
var screenW = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
App._post(‘user/getNotice’, {}, res => {
if (!res.data.content){
return
}
that.setData({
text:res.data.content
})

})

},
toDetails(e){
wx.navigateTo({
url: ‘/pages/goods/index?goods_id=’+e.currentTarget.dataset.goods_id,
})
},

onplus: function(e) {

var cur = parseInt(e.currentTarget.dataset.indexx)
let that = this,

  index =  parseInt(e.currentTarget.dataset.index),
  goodsSkuId = e.currentTarget.dataset.goods_sku_id,
  goods = that.data.cakeTypes[index].goods[cur],

  order_total_price = that.data.order_total_price;
console.log(index)
if (goods.count > goods.spec[0].stock_num) {
  return
}
wx.showLoading({
  title: '加载中',
  mask: true
})
App._post('cart/add', {
  goods_id: e.currentTarget.dataset.goods_id,
  goods_num: 1,
  goods_sku_id: goodsSkuId,
}, function(result) {
  var num = parseInt(that.data.num) + 1
  var count = goods.count+1
  goods.count = count;
  var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
  that.setData({
    ['cakeTypes[' + index + '].goods[' + cur + ']']: goods,
    // order_total_price:money,
    // num: num
  });
  that.getPrice()
});

},
mathadd: function(arg1, arg2) {
return (Number(arg1) + Number(arg2)).toFixed(2);
},
onsub: function(e) {

var cur = parseInt(e.currentTarget.dataset.indexx)
let that = this,
  index =  parseInt(e.currentTarget.dataset.index),
  goodsSkuId = e.currentTarget.dataset.goods_sku_id,
  goods = that.data.cakeTypes[index].goods[cur],
  order_total_price = that.data.order_total_price;

if (goods.count == 0 || e.currentTarget.dataset.value == 0) {

  return
}
wx.showLoading({
  title: '加载中',
  mask: true
})
App._post('cart/sub', {
  goods_id: e.currentTarget.dataset.goods_id,
  goods_sku_id: goodsSkuId,
}, function(result) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })

  goods.count--;
  var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
  var num = that.data.num - 1
  goods.count >= 0 &&
    that.setData({
    ['cakeTypes[' + index + '].goods[' + cur + ']']: goods,
      // order_total_price: money,

    });
  that.getPrice()
  wx.hideLoading();  
});

},
mathsub: function(arg1, arg2) {

return (Number(arg1) - Number(arg2)).toFixed(2);

},

onSubmit: function(e) {
if (this.data.num == 0) {
App.showError(‘请至少选择一个商品’);
return;
}
wx.navigateTo({
url: ‘/pages/cart/checout?type=cart’
})
},

/** 已选列表 */
getList: function () {
this.setData({
show:true
})
let that = this;
App._get(‘cart/getlists’, {}, function (result) {

  that.setData({
    goods_list: result.data.goods_list
    });
  //提示下架的商品
  if (result.data.error_msg != '') {
    //App.showError(result.data.error_msg);
  }
});

},

onClose() {
this.setData({ show: false });
}
})

猜你喜欢

转载自blog.csdn.net/qypingi/article/details/102823739
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022