微信小程序实现电商(商品详情自定义顶部以及滚动监听,瞄点效果)

于 2020-08-20 10:39:11 发布
阅读量624 收藏 5
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543264/article/details/108118205
版权

我们先来看一下效果吧

很简单,这里直接复制全部代码了

index.wxml


<!-- 顶部 S -->
<view class="index" style="position:fixed;height:{{globalData.CustomBar + 4}}px;padding-top: {{globalData.StatusBar}}px;background-color:#fff;z-index:9999;background: rgba(255, 255, 255,{{public != '1'? option:public}});background: rgba(255, 255, 255,{{uoption}});">
	<view class="bui-topins" bindtap="goBack">
		<image src="https://ico.dongtiyan.com/tu-108.png"></image>
	</view>
	<view class="bui-right" wx:if="{{option != '0' || uoption != ''}}">
		<view style="opacity: {{public != '1'?option:public}};" wx:for="{{detatop}}" wx:key data-index="{{index}}" bindtap="toViewClick" class="{{item.usname?'actives':''}}">
			{{item.name}}
		</view>
	</view>
</view>
<!-- 顶部 E -->
<scroll-view scroll-y="true" style="height:{{windowHeight}}px;" bindscroll="onPageScroll" scroll-into-view="index-{{listCurID}}" enable-back-to-top="true" scroll-with-animation="true">
	<!-- 商品信息 S -->
	<view id="index-A">
		<!-- 写入内容 S -->
	</view>
	<!-- 商品信息 E -->
	<!-- 参数 S -->
	<view class="evaluate" id="inx-D">
		<view class="visltin">
			<view class="visltinx" id="index-D" style="height:{{globalData.CustomBar}}px;position:absolute;top:-{{globalData.CustomBar}}px;"></view>
		</view>
        <!-- 写入内容 S -->
	</view>
	<!-- 评价 S -->
	<view class="evaluate" id="inx-B">
		<view class="visltin">
			<view class="visltinx" id="index-B" style="height:{{globalData.CustomBar}}px;position:absolute;top:-{{globalData.CustomBar}}px;"></view>
		</view>
        <!-- 写入内容 S -->
	</view>

	<!-- 详情 S -->
	<view class="evaluate" id="inx-C">
		<view class="visltin">
			<view class="visltinx" id="index-C" style="height:{{globalData.CustomBar}}px;position:absolute;top:-{{globalData.CustomBar}}px;"></view>
		</view>
        <!-- 写入内容 S -->
	</view>
	<!-- 详情 E -->
</scroll-view>

以上就是主体,复制粘贴就可以使用,里面写入自己的页面效果就行了

index.wxss

/* 占位 */
.visltin {
  /* width: 100%; */
  height: 30rpx;
  background-color: #F7F7F7;
  float: left;
  overflow: hidden;
  position: relative;
}
/* 顶部 */
.index {
  width: 100%;
  float: left;
  height: 64px;
  padding-top: 20px;
  padding-right: 190rpx;
  box-shadow: 0rpx 0rpx 0rpx;
  min-height: 0px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}

#index-A {
  width: 100%;
  float: left;
  background: #f3f0f3;
}

#index-C {
  width: 100%;
  float: left;
}

#index-B {
  width: 100%;
  float: left;
  background: #f3f0f3;
}

.bui-topins {
  width: 25px;
  height: 25px;
  float: left;
  margin-left: 10px;
}

.bui-topins image {
  width: 100%;
  height: 100%;
}

.bui-top {
  float: right;
  padding: 4rpx 10rpx;
  border: 1px solid #ddd;
  border-radius: 30rpx;
  background-color: #fff;
}

.bui-top>text {
  font-size: 42rpx;
  color: #000;
}

.cuIcon-back {
  padding: 0 11rpx;
  border-right: 1px solid #eee;
}

.cuIcon-homefill {
  padding: 0 15rpx 0 20rpx;
}

.bui-right {
  width: 67%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 15px;
  margin: 0 auto;
}

.bui-right>view {
  width: 25%;
  text-align: center;
  float: left;
  font-size: 26rpx;
}

.red {
  color: #e54d42;
  font-weight: 700;
}

.visitin {
  width: 100%;
  float: left;
  overflow: hidden;
  visibility: hidden;
}

.evaluate {
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
}
.top-size {
  font-size: 24rpx;
  margin-right: 30rpx;
}

.top-size:last-child {
  margin: 0;
}

.go-back {
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
}
.actives {
  color: #f73a3f;
  /* border-bottom: 2px solid #f73a3f; */
}

index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 获取高度
    globalData: {
      StatusBar: '',
      CustomBar: ''
    },
    // 商品信息
    detatop: [
      { uid: 'A', name: '商品', usname: false },
      { uid: 'B', name: '评价', usname: false },
      { uid: 'C', name: '详情', usname: false },
      { uid: 'D', name: '参数', usname: false }
    ],
    //跳转
    listCurID: '',
    option: 0,
    public: '',
    uoption: '',
    scrollTop: 0,                                         // 滚动的距离
    windowHeight: '',                                    // 获取设备高度
    toView: 'index-A',
    nowstatus: 'index-A',
  },
    /**
   * 导航瞄点点击
   */
  toViewClick: function (e) {
    let that = this
    let index = e.currentTarget.dataset.index
    this.data.option = '1'
    if (index == 0) {
      that.data.public = '',//执行滚动
        that.data.option = '0'
      that.setData({
        option: that.data.option
      })
    }
    setTimeout(function () {
      that.data.detatop[index].usname = true
      that.data.listCurID = that.data.detatop[index].uid
      for (let i = 0; i < that.data.detatop.length; i++) {
        if (i != index) {
          that.data.detatop[i].usname = false
        }
      }
      that.setData({
        detatop: that.data.detatop,
        listCurID: that.data.listCurID,
        option: that.data.option,
        uoption: '',
        public: that.data.public,//执行滚动
      })
    }, 200)
  },
  /**
   * 监听滚动
   * 这里做了事件节流, 频繁操作setData是一件很消耗性能的事情, 因为时间问题, 可以把节流函数封装下
   * 滚动瞄点监听
   */
  onPageScroll: function (e) {
    let that = this;
    wx.createSelectorQuery().select('#index-A').boundingClientRect(function (rect) {
      let a = -(that.data.heigtopA - that.data.globalData.CustomBar - 10)
      if (rect.top <= 0 && rect.top > a) {
        that.data.detatop[0].usname = true
        that.data.detatop[1].usname = false
        that.data.detatop[2].usname = false
        that.data.detatop[3].usname = false
      }
    }).exec()
    wx.createSelectorQuery().select('#index-B').boundingClientRect(function (rect) {
      let b = -(that.data.heigtopB - 1)
      if (rect.top <= 0 && rect.top > b) {
        that.data.detatop[0].usname = false
        that.data.detatop[1].usname = true
        that.data.detatop[2].usname = false
        that.data.detatop[3].usname = false
      }
    }).exec()
    wx.createSelectorQuery().select('#index-D').boundingClientRect(function (rect) {
      let d = -(that.data.heigtopD - 1)
      if (rect.top <= 0 && rect.top > d) {
        that.data.detatop[0].usname = false
        that.data.detatop[1].usname = false
        that.data.detatop[2].usname = false
        that.data.detatop[3].usname = true
      }
    }).exec()
    wx.createSelectorQuery().select('#index-C').boundingClientRect(function (rect) {
      if (rect.top <= 0) {
        that.data.detatop[0].usname = false
        that.data.detatop[1].usname = false
        that.data.detatop[2].usname = true
        that.data.detatop[3].usname = false
      }
    }).exec()
    if (this.data.public == '1' && e.detail.scrollTop < 50) {
      this.data.uoption = '0.4'
    } else {
      this.data.uoption = ''
    }
    if (e.detail.scrollTop > 30 && e.detail.scrollTop < 50) {
      this.data.option = '0.2'
    } else if (e.detail.scrollTop > 50 && e.detail.scrollTop < 70) {
      this.data.option = '0.4'
    } else if (e.detail.scrollTop > 70 && e.detail.scrollTop < 90) {
      this.data.option = '0.6'
    } else if (e.detail.scrollTop > 90 && e.detail.scrollTop < 110) {
      this.data.option = '0.8'
    } else if (e.detail.scrollTop > 110 && e.detail.scrollTop < 200) {
      this.data.option = '1'
    } else if (e.detail.scrollTop > 200) {
      this.data.option = '1'
      this.data.public = '1'
    } else {
      this.data.option = '0'
    }
    this.setData({
      option: this.data.option,
      public: this.data.public,
      uoption: this.data.uoption,
      detatop: this.data.detatop
    })
  },
    // 返回
  goBack: function () {
    wx.navigateBack({
      delta: 1
    })
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    wx.getSystemInfo({
      success: e => {
        this.data.globalData.StatusBar = e.statusBarHeight;
        let capsule = wx.getMenuButtonBoundingClientRect();
        if (capsule) {
          this.data.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
        } else {
          this.data.globalData.CustomBar = e.statusBarHeight + 50;
        }
      }
    })
    wx.createSelectorQuery().select('#index-A').boundingClientRect(function (rect) {
      _this.setData({
        heigtopA: rect.height
      });
      // console.log('商品', rect)
    }).exec()
    wx.createSelectorQuery().select('#inx-B').boundingClientRect(function (rect) {
      _this.setData({
        heigtopB: rect.bottom
      });
      // console.log('评价', rect)
    }).exec()
    wx.createSelectorQuery().select('#inx-D').boundingClientRect(function (rect) {
      _this.setData({
        heigtopD: rect.height
      });
      // console.log('推荐', rect)
    }).exec()
    _this.setData({
      globalData: this.data.globalData,
      windowHeight: wx.getSystemInfoSync().windowHeight
    })
  },
})

index.json

{
  "navigationStyle": "custom",
  "usingComponents": {}
}

以上就是所有代码, 有什么问题可以随时下方留言

 

如果对你有帮助,请关注一下博主的小程序支持一下, 在此谢谢了

 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值