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

客官°小女子只卖身不卖艺 2022-11-29 11:46 185阅读 0赞

我们先来看一下效果吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

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

index.wxml

<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>
    
    <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">
    	
    	<view id="index-A">
    		
    	</view>
    	
    	
    	<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>
            
    	</view>
    	
    	<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>
            
    	</view>
    
    	
    	<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>
            
    	</view>
    	
    </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": {}
    }

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221124/022f990b0a864d388af2e8bd97eace32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20221124/804524e6e39548fc9a6ef642ec779aee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: /images/20221124/e016c9daaad8442fb9fd626ed718d0a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3]: /images/20221124/c1d7532e7daf4395946d50d6c8873a29.png