小程序菜单-锚点 左右滑动定位

最新推荐文章于 2023-08-29 16:55:09 发布
最新推荐文章于 2023-08-29 16:55:09 发布
阅读量313 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qd_xbL/article/details/112898051
版权

HTML：

<!-- menu.wxml -->
<view>

  <!-- mainBox -->
  <view class="mainBox">

    <!-- menuMain -->
    <view class="menuMain">

      <!-- left -->

      <scroll-view style="height:{{height}}px" class="menuTabs" scroll-with-animation="true" scroll-y="true">
        <view>
          <view class="menu-item" wx:for="{{menuTabs}}" wx:key="index" data-id="tab{{index}}" bindtap="clickMenu" class="menu-item {{currentLeftSelect == 'tab'+index ? 'active': ''}}"   >
            <text>{{item.title}}</text>
            <view class="rmdBtn" wx:if="{{item.rmdFlag==1}}">推荐</view>
          </view>
        </view>
      </scroll-view>
      <!-- left end -->

      <!-- right -->
      <scroll-view class="menuScroll" style="height:{{height}}px" scroll-y="true" bindscroll="handleScroll" scroll-into-view="{{toView}}" scroll-with-animation="true">
        <!-- <view wx:for="{{menuList}}" wx:key="index" id="tab{{index}}" class="menuItem {{top>130 ? 'topnav' : ''}}"> -->
        <view class="menu-list" wx:for="{{menuList}}" wx:for-item="list" wx:key="index" id="tab{{index}}" style="{{index == (menuList.length - 1) ? 'margin-bottom: 1000rpx':'' }}">
          <view>
            <!-- menuTitle -->
            <view class="menuTitle">
								<text>{{list.productType}}</text>
								<view class="line"></view>
							</view>
            <!-- menuTitle end -->
          </view>

          <!-- menuList -->
            <view class="list-item" wx:for="{{list.products}}" wx:key="key" data-titel="{{list.productType}}" data-item="{{item}}" bindtap="getMenuDetail">
              <view class="caffeeInfo">
                <!-- 售罄遮罩 -->
                <image class="outOfStock" wx:if="{{item.soldOutFlag=='1'}}" src="https://cofeplus.oss-cn-beijing.aliyuncs.com/applets/images/menu_outOfStock.png"></image>
                <!-- 售罄遮罩 end -->
                <image class="caffeeImg" src="{{item.littleImg}}"></image>
                <view class="infoDetail">
                  <view class="nameBox">
                    <text class="caffeeName">{{item.productName}}</text>
                    <text class="discount" wx:if="{{item.hotFlag==1}}">热销</text>
                  </view>
                  <text class="englishName">{{item.englishName}}</text>
                  <view class="origin specs">规格：<rich-text nodes="{{item.composition}}"></rich-text></view>
                  <!-- <text class="origin">规格：{{item.composition}}</text> -->
                  <view class="priceBox">
                    <text class="price">￥<text style="{{item.isProduct == 1?'color: #727171':''}}">{{item.sellingPrice}}</text></text>
                    <text class="originPrice" wx:if="{{item.sellingPrice!=item.originalPrice}}">￥{{item.originalPrice}}</text>
                  </view>
                </view>
              </view>

              <!-- 未售罄加号 -->
              <view class="addBtn" wx:if="{{item.soldOutFlag=='0' && item.isProduct == 0}}">
                <image class="addImg" src="https://cofeplus.oss-cn-beijing.aliyuncs.com/applets/images/menu_add2.png"></image>
              </view>
              <!-- 未售罄加号 end -->
              <!-- 已售罄加号 - 非商品 -->
              <view class="addBtn" wx:if="{{item.soldOutFlag=='1' || item.isProduct == 1}}">
                <image class="addImg" src="https://cofeplus.oss-cn-beijing.aliyuncs.com/applets/images/menu_noAdd.png"></image>
              </view>
              <!-- 已售罄加号 - 非商品 end -->

            </view>
            <!-- menuList end -->
        </view>
      </scroll-view>
      <!-- right end -->

    </view>
    <!-- menuMain end -->

  </view>
  <!-- mainBox end -->


</view>

css：

/* pages/menu/menu.wxss */

/*
  mainbox
*/

.mainBox {
  width: 100%;
}

/*
  swiper
*/

swiper {
  width: 100%;
  display: flex;
  height: 138rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}

/*
  menuMain
*/

.menuMain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  position: absolute;
  background-color: #fff;
}

.menuTabs {
  width: 25%;
  height: 100%;
  background: #f5f5f5;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #f5f5f5;
  height: 30rpx;
  font-size: 28rpx;
  color: #666;
  padding: 30rpx 0;
  position: relative;
}

.menu-item text{
  text-align: center;
}

.active {
  background: #fff;
  /* font-weight: bold; */
  color: #00c8c8;
  /* border-left: 2px solid #27b8b8; */
  /* border-bottom-right-radius: 30rpx; */
}
.active+.menu-item{
  border-top-right-radius: 24rpx;
}

.menuList {
  width: 75%;
  background: #fff;
  padding: 20rpx 0;
}

.menuList:last-child {
  margin-bottom: 380rpx;
}

.menuScroll {
  width: 100%;
  height: 100%;
  padding: 10rpx 0 0;
}

.menuItem:last-child{
  margin-bottom: 40rpx;
}

.menuTitle {
  width: 100%;
  font-size: 22rpx;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20rpx;
  margin-bottom: 40rpx;
  /* margin-top: 20rpx; */
}

.line {
  width: 82%;
  height: 1rpx;
  border-bottom: 1rpx solid #eee;
}

.list-item {
  margin-left: 20rpx;
  margin-top: 20rpx;
  margin-right: 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #b9f0f0;
  padding-bottom: 20rpx;
}
.menu-list .list-item:last-child{
  border-bottom: 0;
}
/* .list-item:last-child {
  border: none;
} */

.caffeeImg {
  width: 140rpx;
  height: 140rpx;
}

.addBtn {
  position: relative;
  min-width: 60rpx;
}

.addImg {
  width: 45rpx;
  height: 45rpx;
  position: absolute;
  bottom: 0;
  right: 10rpx;
}

.caffeeName {
  /* font-size: 26rpx; */
  color: #00c8c8;
  /* font-weight: bold; */
  vertical-align: middle;
}

.englishName, .origin {
  font-size: 24rpx;
  color: #898989;
}
.origin{
  margin: 4rpx 0 25rpx;
}

.price {
  /* font-size: 28rpx; */
  color: #727171;
  /* font-weight: bold; */
}
.price text{
  font-size: 40rpx;
  color: #00c8c8;
}

.discount {
  font-size: 16rpx;
  color: #fff;
  background: #f5a622;
  border-radius: 6rpx;
  padding: 6rpx;
  margin-left: 10rpx;
  vertical-align: middle;
}

.nameBox {
  line-height: 30rpx;
  margin-bottom: 12rpx;
}

.caffeeInfo {
  display: flex;
  flex-flow: row;
}

.infoDetail {
  display: flex;
  flex:1;
  flex-flow: column;
  margin-left: 16rpx;
  justify-content: center;
}

.infoDetail text:first-child {
  margin-bottom: 6rpx;
}

.infoDetail text:last-child {
  margin-top: 12rpx;
}

.outOfStock {
  position: absolute;
  width: 140rpx;
  height: 140rpx;
}

.originPrice{
  color: #999;
  font-size: 24rpx;
  text-decoration: line-through;
  margin-left: 8rpx;
}

.rmdBtn{
  position: absolute;
  top:0;
  right:0;
  background: #f5a622;
  color: #fff;
  font-size: 18rpx;
  padding:0 10rpx;
}

.specs{
  display: flex;
  /* align-items: center; */
  flex-wrap: wrap;
}
.specs rich-text{
  display: inline-block;
  flex: 1;
  padding: 0;
}```

js:
// pages/menu/menu.js
const lang = require("../../utils/language.js");
const app = getApp();
const c_url = getApp().globalData.c_apiRoot;

// 右侧每一类的 bar 的高度（固定）
const RIGHT_BAR_HEIGHT = 23;

// 右侧每个子类的高度（固定）
const RIGHT_ITEM_HEIGHT = 70;

// 左侧每个类的高度（固定）
const LEFT_ITEM_HEIGHT = 45

Page({

  /**
   * 页面的初始数据
   */
  data: {

    // menuTabs
    current: "tab1",
    menuTabs: [],

    // menuList
    menuList: [
    	{
	    	productType: "经典咖啡",
	    	products:[
	    		{
	    			composition: "浓缩咖啡，水",
					epId: 163,
					hotFlag: 1,
					isProduct: 0,
					littleImg: "https://cofeplus.oss-cn-beijing.aliyuncs.com/product/meishikafei.jpg",
					originalPrice: 10.9,
					productCode: "test0116100003",
					productName: "美式咖啡",
					sellingPrice: 10.9,
					soldOutFlag: 0,
	    		},
	    			{
	    			composition: "浓缩咖啡，牛奶",
					epId: 168,
					hotFlag: 0,
					isProduct: 0,
					littleImg: "https://cofeplus.oss-cn-beijing.aliyuncs.com/product/natiekafei.jpg",
					originalPrice: 14.9,
					productCode: "test0116100001",
					productName: "美式拿铁",
					sellingPrice: 14.9,
					soldOutFlag: 0,
	    		},
	    	],
	    	rmdFlag: 0
    	},
    	{
	    	productType: "各国特色",
	    	products:[
	    		{
	    			composition: "浓缩咖啡，水",
					epId: 163,
					hotFlag: 1,
					isProduct: 0,
					littleImg: "https://cofeplus.oss-cn-beijing.aliyuncs.com/product/meishikafei.jpg",
					originalPrice: 10.9,
					productCode: "test0116100003",
					productName: "美式咖啡",
					sellingPrice: 10.9,
					soldOutFlag: 0,
	    		},
	    			{
	    			composition: "浓缩咖啡，牛奶",
					epId: 168,
					hotFlag: 0,
					isProduct: 0,
					littleImg: "https://cofeplus.oss-cn-beijing.aliyuncs.com/product/natiekafei.jpg",
					originalPrice: 14.9,
					productCode: "test0116100001",
					productName: "美式拿铁",
					sellingPrice: 14.9,
					soldOutFlag: 0,
	    		},
	    	],
	    	rmdFlag: 0
    	}
	],
    currentLeftSelect:'tab0',
    // 锚点
    toView: 'tab0',
    curId: 'tab0',
    //记录scroll-view滚动过程中距离顶部的高度
    distance: 0,
    currentLeft: 0, //左侧选中的下标

    // 屏幕高度
    height: "",

    // 当前页
    curPage: 1,

    heightArr:[],
    lastActive:'',
    eachRightItemToTop: [],
  },

  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          height: res.windowHeight-69
        })
      },
    })

    
  },

  onShow: function () {
    this.getMenus();
  },

  /**
   * 获取每个右侧的 bar 到顶部的距离，
   * 用来做后面的计算。
  */
  getEachRightItemToTop: function (data) {
    var obj = {};
    var totop = 0;
    // 循环来计算每个子类到顶部的高度
    obj['tab0'] = totop
    for (let i = 1; i < data.length+1; i++) {
      var elemId = 'tab' + i
      // obj[elemId] = totop
      if (i != 0) {
        totop += (RIGHT_BAR_HEIGHT + data[i - 1].products.length * RIGHT_ITEM_HEIGHT)
      }
      // 这个的目的是 例如有两类，最后需要 0-1 1-2 2-3 的数据，所以需要一个不存在的 'last' 项，此项即为第一类加上第二类的高度。
      var lastIndex = data.length;
      console.log(lastIndex, totop)
      obj[lastIndex == i ? 'last' : elemId] = totop
    }
    console.log(obj)
    return obj
  },

  // 锚点
  clickMenu: function (e) {
    this.setData({
      toView: e.currentTarget.dataset.id,
      currentLeftSelect: e.currentTarget.dataset.id
    })
  },

  // scroll
  handleScroll: function (e) {
    // console.log(this.data.eachRightItemToTop)
    for (let i = 0; i < this.data.menuList.length; i++) {
      var elemId = 'tab' + i
      let left = this.data.eachRightItemToTop[elemId]
      // console.log(left)
      let right = this.data.eachRightItemToTop[this.data.menuList[i + 1] ? ('tab' + (i+1)) : 'last']
      if (e.detail.scrollTop < right && e.detail.scrollTop >= left) {
        this.setData({
          currentLeftSelect: elemId,
          leftToTop: LEFT_ITEM_HEIGHT * i
        })
      }
    }
    // console.log(this.data.constants)
    // console.log(this.data.eachRightItemToTop)
  },

  // 菜单详情
  getMenuDetail: function (e) {
    console.log(e)
  },

  // 获取商品列表
  getMenus: function () {
    var that = this;
    var data = {
      eqNumber: wx.getStorageSync('eqNumber'),
      language: wx.getStorageSync('lan'),
      pageNum: this.data.curPage,
      pageSize: 500
    };
    app.httpPost(c_url + 'v1/get_products', data, (res) => {
      var tempTabs = [];
      res.data.forEach(function (item, index) {
        tempTabs.push({
          'title': item.productType,
          'rmdFlag': item.rmdFlag
        });
      });
      that.setData({
        menuList: res.data,
        menuTabs: tempTabs,
        eachRightItemToTop: that.getEachRightItemToTop(res.data)
      });
      // this.getHeight()
    }, (errRes) => {
      app.errorMsg(errRes.data.msg);
    });
    
  },


})
qd_xbL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序横向滑动菜单栏实现
weixin_45432648的博客
08-23 2243
微信小程序横向滑动菜单栏实现
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
kingAn123的博客
05-05 8857
文章目录效果图一、顶部标签栏二、列表内容部分swiper组件高度及上下滚动样式三、数据结构及赋值方法四、scroll组件触底事件(分页相关五、scroll组件的高度样式swiper组件scroll组件样式区别六、其他 效果图 一、顶部标签栏 定位顶部便签栏，使用color-ui的组件样式实现 <scroll-view scroll-x class="bg-white nav my-...
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
12-28
1.wxml代码： <!-- 左侧滚动栏 --> <scroll-view scroll-y scroll-with-animation scroll-left={{scrollLength}} class='scrollY'
scroll-view的描点跳转
m0_63250938的博客
10-28 856
在微信小程序中，使用 scroll-view 实现长页面的标记跳转，官方文档中并没有例子演示。 锚点标记主要是使用 的scroll-into-view属性。
【小程序】scrollview制作tab导航栏，点击tab自动滚动到指定位置
最新发布
要做一条翻身的咸鱼
08-29 1150
scroll-view+swiper制作tab标签页，点击滚动到指定位置
微信小程序scroll-view点击导航栏滚动到对应位置
qq_31888873的博客
03-13 1305
微信小程序scroll-view点击导航栏滚动到对应位置scroll-into-viewcreateSelectorQuery scroll-into-view 微信小程序提供了点击滚动到相应元素的属性，这个会将对应的元素滚动到scroll-view的顶部，但是如果内部有吸顶元素时，就会被覆盖一部分，这时候就需要用到微信小程序的另一个api。 createSelectorQuery 返回一个 SelectorQuery 对象实例。 const query = wx.createSelectorQuery
微信小程序scroll-view滑动的时候滑动到指定位置
ZerZhang的博客
03-23 2632
微信小程序scroll-view滑动的时候滑动到指定位置(随意设置动画版)
小程序中使用scroll-view实现左右滑动菜单
weixin_42645716的博客
06-29 906
小程序中使用scroll-view实现左右滑动菜单
小程序-实现左右菜单联动功能
weixin_47124112的博客
08-06 2947
代码】小程序左右联动。
微信小程序实现滑动/点击切换Tab
热门推荐
苏苏就是小苏苏的博客
12-01 1万+
👏 swiper+scroll-view实现滑动/点击切换Tab，以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏！
微信小程序左滑动显示菜单功能的实现
08-27
主要介绍了微信小程序左滑动显示菜单功能的实现,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序侧边栏滑动特效(左右滑动)
08-31
主要介绍了微信小程序侧边栏滑动特效(左右滑动),今天小编给大家带来四个漂亮的特效，具体效果展示和代码实现大家通过本文学习吧
小程序实现左右滑动切换菜单+瀑布流显示列表demo
05-27
小程序实现左右滑动列表区域，切换菜单（横向滑动菜单，切换时自动设置选中的菜单窗口居中显示），加载显示对应瀑布流数据，页面滚动时，设置菜单栏是否置顶显示
左侧菜单栏，页面滚动定位
06-02
左侧菜单栏，页面滚动定位
小程序左滑动显示菜单
06-13
小程序左滑动显示菜单 小程序左滑动显示菜单 小程序左滑动显示菜单
小程序实现锚点滑动效果
10-16
主要为大家详细介绍了小程序实现锚点滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 scroll-view实现锚点滑动的示例
11-27
最近开始做小程序，通读一遍文档再上手并不算难，但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转，一个城市列表的效果示意图如下： 因为在微信小程序的环境中不能想在浏览器里设置标签，或者...
微信小程序 scroll-view 实现锚点跳转功能
10-15
主要介绍了微信小程序 scroll-view 实现锚点跳转功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序scroll-view锚点链接滚动跳转功能
10-15
主要介绍了微信小程序scroll-view锚点链接滚动跳转功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
HTML-----锚点定位有滚动效果
08-17
- *2* [微信小程序-scroll-view滚动到指定位置（类似锚点）](https://download.csdn.net/download/weixin_38601878/16213063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值