精华内容
下载资源
问答
  • 小程序锚点定位

    2020-10-12 17:12:53
    小程序锚点定位 // 1.最外层需要用scroll-view包裹,scroll-view必须给固定高度以及scroll-y // 2.scroll-into-view(值应为某子元素 id,则滚动到该元素,元素顶部对齐滚动区域顶部) // 3.给目标容器添加id属性 // 4...

    小程序锚点定位

    // 1.最外层需要用scroll-view包裹,scroll-view必须给固定高度以及scroll-y
    // 2.scroll-into-view(值应为某子元素 id,则滚动到该元素,元素顶部对齐滚动区域顶部)
    // 3.给目标容器添加id属性
    // 4.滚动后,需要通过onScroll方法清除scroll-into-view的值,用来二次锚点定位
    
    // index.axml
    <scroll-view class="index-page" scroll-into-view="{{toView}}" scroll-y onScroll='onScroll'>
    	<button onTap="goTask">跳转到task锚点</button>
    	<view class='task-wrapper' id="task">
    	</view>
    </scroll-view>
    
    // index.js
    Page({
    	data:{
    		toView: ''
    	}
    })
    goTask(){
    	this.setData({
    		toView:"task"
    	})
    },
    onScroll(){
    	this.setData({
    		toView:""
    	})
    }
    
    展开全文
  • 小程序锚点效果

    2021-01-04 19:06:14
    业务背景:小程序原生中实现类似h5的锚点效果,而且顶部tab可以随着滑动自适应居中 话不多说,上码,粘过去直接用 ※※※由于是从项目中摘出来的,所以有些没用上的代码,就没删除 wxml: <view class="" hover-...

    业务背景:小程序原生中实现类似h5的锚点效果,而且顶部tab可以随着滑动自适应居中

    话不多说,上码,粘过去直接用
    ※※※由于是从项目中摘出来的,所以有些没用上的代码,就没删除

    wxml:

    <view class="" hover-class="none" hover-stop-propagation="false">
      <view class="navlist cs-fix" id="navlist">
        <scroll-view scroll-x scroll-into-view="{{active_tab}}" scroll-with-animation="true">
          <block wx:for="{{navList}}" wx:key="index" wx:for-item="navitem" wx:for-index="idx">
            <view class="alleverynav _inline " data-idx='{{idx}}' data-name="nav{{navitem.nav_id}}" data-id="{{navitem.nav_id}}" bindtap="navBtn" id="tab_{{idx}}">
              <view class="everynav {{currentCategory==idx?'active':''}}">{{navitem.nav_name}}</view>
              <view wx:if="{{currentCategory==idx}}" class="botline"></view>
            </view>
          </block>
        </scroll-view>
      </view>
      <scroll-view scroll-into-view="{{scrollInTo}}" scroll-y="true" bindscroll="scrolling" style="height: 100vh;" class="{{showNull ? 'scrollbox' : ''}}">
        <block wx:for="{{navList}}" wx:key='index' wx:for-item='itemName'>
          <view id="nav{{itemName.nav_id}}" class="every eve{{index+1}}">这是{{itemName.nav_name}}</view>
        </block>
        <view class="" style="width: 100%;height: 80rpx;"></view>
      </scroll-view>
    </view>
    

    js:

    Page({
      data: {
        currentCategory: 0,
        moveStartPos: 0,
        active_tab: 'tab_0',
        navList: [{
            nav_name: '不知道咋说',
            nav_id: 0
          },
          {
            nav_name: '准备好了吗',
            nav_id: 1
          },
          {
            nav_name: '来吧',
            nav_id: 2
          },
          {
            nav_name: '开始',
            nav_id: 3
          },
          {
            nav_name: '哎呀',
            nav_id: 4
          },
          {
            nav_name: '出错了',
            nav_id: 5
          },
          {
            nav_name: '算了',
            nav_id: 6
          },
    
        ],
      },
      onLoad: function (options) {},
      onReady: function() {
        setTimeout(()=>{
          this.tabfn()
        },500)
      },
      navBtn: function (e) {
        let id = e.currentTarget.dataset.id
        let idx = e.currentTarget.dataset.idx;
        this.setData({
          active_tab: 'tab_' + ((idx - 2) < 0 ? 0 : (idx - 1)),
          currentCategory: id,
          scrolly: true,
          scrollTop: this.data.jltop
        }, () => {
          this.setData({
            scrollInTo: e.currentTarget.dataset.name,
          })
        })
        wx.createSelectorQuery().select('#navlist').boundingClientRect((rect) => {
          // 节点的上边界坐标
          let top = rect.top;
          if (top == 0) {
            this.setData({
              showNull: true
            })
          } else {
            this.setData({
              showNull: false
            })
          }
        }).exec()
      },
      scrolling(e) {
        wx.createSelectorQuery().select('#navlist').boundingClientRect((rect) => {
          let top = rect.top;
          if (top == 0) {
            this.setData({
              scrolly: true
            })
          } else {
            this.setData({
              scrolly: false
            })
          }
        }).exec()
        // 将当前的距离传入
        this.onScrollViewScroll({
          scrollTop: e.detail.scrollTop
        })
      },
      onScrollViewScroll(e) {
        // 当前滚动的距离
        let scrollTop = e.scrollTop
        // moveStartPos记录着上一次滚动完成时的位置, 用于判断滚动方向
        // 如果现在的滚动距离大于moveStartPos说明正在往下滚动
        if (scrollTop > this.data.moveStartPos) {
          this.setData({
            moveStartPos: scrollTop
          })
          // 遍历每个商品距离顶部的距离
          this.data.navList.forEach((item, index) => {
            // 如果滚动的距离大于某个商品到顶部的距离说明该商品到了顶部, 减10是为了减少触发距离
            if (Number(scrollTop) > item.top  - 58) {
              // 当前分类的索引小于满足条件的商品索引就赋值, 跳到下一个分类
              if (this.data.currentCategory < index) {
                this.setData({
                  currentCategory: index,
                  active_tab: 'tab_' + ((index - 2) < 0 ? 0 : (index - 2)),
                })
              }
            }
          })
          // 如果现在的滚动距离小于moveStartPos说明正在往上滚动 
        } else if (scrollTop < this.data.moveStartPos) {
    
          this.setData({
            moveStartPos: scrollTop
          })
          this.data.navList.forEach((item, index) => {
            if (Number(scrollTop) < item.top - 58) {
              if (this.data.currentCategory >= index) {
                this.setData({
                  currentCategory: index ? index - 1 : index,
                  active_tab: 'tab_' + ((index - 2) < 0 ? 0 : (index - 2)),
                })
              }
            }
          })
        }
      },
      tabfn: function () {
        this.animation = wx.createAnimation()
        var that = this
        var arr = []
        // 页面准备完成之后获取每个分类距离顶部的高度, 存储在数组productsTop中
        setTimeout(function () {
          var query = wx.createSelectorQuery()
          var toptapArr = that.data.navList;
          toptapArr.forEach((item, index) => {
            query.select('#nav' + item.nav_id).boundingClientRect((res) => {
              if (res) {
                item.top = res.top;
                that.setData({
                  navList: toptapArr,
                  distanceTop: that.data.navList[0].top
                })
              }
            })
          })
          query.selectAll('.cs-fix').boundingClientRect((rect) => {
            that.categoryTop = rect[0].top
          }).exec()
        }, 800)
      },
    
    })
    

    wxss:

    ._inline {
      display: inline-block;
    }
    
    .navlist .active {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      height: 75rpx;
    }
    
    .navlist .botline {
      width: 48rpx;
      height: 4rpx;
      background: #D71C18;
      border-radius: 2rpx;
      margin: 0 auto;
    }
    
    .navlist .alleverynav {
      margin-right: 56rpx;
    
    }
    
    .navlist .everynav {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666666;
    }
    
    .navlist {
      white-space: nowrap;
      overflow-x: scroll;
      height: 90rpx;
      line-height: 90rpx;
      overflow-y: hidden;
      margin-bottom: 20rpx;
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 100;
    }
    
    .every {
      background: skyblue;
      border-bottom: 1px solid rebeccapurple;
      height: 1500rpx;
    }
    

    说明:只是初步实现了效果,可能不是很完善,欢迎大佬讨论交流

    觉得不错,赏个关注呗😀,不胜感激Thanks♪(・ω・)ノ

    展开全文
  • 微信小程序锚点

    2020-10-16 11:34:55
    <view> <view class="flexRow tab_bo {{top>550 ? 'topnav' : ''}}"> <view class="tab" bindtap="jumpTo" data-tab_index="item0">...view class="text" style="color:{{toView=='item0'?...
    
     <view>
      <view class="flexRow tab_bo {{top>550 ? 'topnav' : ''}}">
          <view class="tab" bindtap="jumpTo" data-tab_index="item0">
            <view class="text" style="color:{{toView=='item0'?'#000':''}}">商品详情</view>
            <view class="_" wx:if="{{toView=='item0'}}"></view>
          </view>
          <view class="tab" bindtap="jumpTo" data-tab_index="item1">
            <view class="text" style="color:{{toView=='item1'?'#000':''}}">案例 </view>
            <view class="_" wx:if="{{toView=='item1'}}"></view>
          </view>
          <view class="tab" bindtap="jumpTo" data-tab_index="item2">
            <view class="text" style="color:{{toView=='item2'?'#000':''}}">评价 </view>
            <view class="_" wx:if="{{toView=='item2'}}"></view>
          </view>
          <view class="tab" bindtap="jumpTo" data-tab_index="item3">
            <view class="text" style="color:{{toView=='item3'?'#000':''}}">购买须知 </view>
            <view class="_" wx:if="{{toView=='item3'}}"></view>
          </view>
    
        </view>
       <view>
         <view id="item0">1</view>
         <view id="item1">2</view>
         <view id="item2">3</view>
         <view id="item3">4</view>
       </view>
     </view>
    .tab_bo{
      background: #fff;
    }
    .tab_bo .tab{
      flex:1;
      text-align: center;
      }
      .tab_bo .tab .text{
        line-height: 60rpx;
        font-size: 32rpx;
        color: #999999;
      }
      .tab_bo .tab ._{
        /* width: 40rpx; */
        height: 5rpx;
        background: #FC5A8E;
        margin: 0 25rpx;
      }
      .topnav {
        position: fixed;
        top: 0rpx;
        width: 100%;
        z-index: 99;
        background: #fff;
      
      }
      jumpTo: function (e) {
    
        // 获取标签元素上自定义的 data-opt 属性的值
        let target = e.currentTarget.dataset.tab_index;
    
        this.setData({
          toView: target
        })
      },

     

    展开全文
  • 微信小程序锚点

    2020-07-03 18:31:38
    首先用小程序自带的锚点就需要用到scroll-view标签; 默认给个初始值 从第一个开始 albumnIndex:0 ; 接着获取当前点击的是第几个,也就是下标,把值重新赋值给 albumnIndex ,就是下面代码中albumtab 这个方法; ...

     点击导航 跳转到对应的区域

     

    首先用小程序自带的锚点就需要用到scroll-view标签;

    默认给个初始值 从第一个开始 albumnIndex:0 ;

    接着获取当前点击的是第几个,也就是下标,把值重新赋值给 albumnIndex  ,就是下面代码中 albumtab 这个方法;

    还有一点很重要,内容部分要给高度,否则不起作用

    就是代码里

    .albumCon{width:calc(100% - 64rpx);padding:0 32rpx;height: calc(100% - 120rpx);position: fixed;bottom: 0;left: 0;}

     

    实现的具体代码如下:

    1、导航部分

      <view class="albumList">
        <scroll-view 
            scroll-x="true" 
            scroll-into-view="NAV{{albumnIndex}}" 
            scroll-with-animation="true">
    
              <view bindtap="albumtab" 
                    id="NAV{{index}}" 
                    wx:for="{{albumnewdata}}" 
                    wx:key="index" 
                    data-index="{{index}}" class="albumItem {{albumnIndex==index?'cur':''}}" >{{item.mainAlbumName}}({{item.count}})</view> 
         
        </scroll-view>
      </view>

    2、内容区域

      <view class="albumCon">
      <scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{albumnIndex}}" scroll-with-animation="true">
        <view wx:for="{{albumnewdata}}" wx:key="index"  class="albumConItem">
          <view id="NAV{{index}}" class="albumtitle">{{item.mainAlbumName}}</view>
          <view class="albumImg {{item.photo.length>=3?'_between':''}}" >
            <image  wx:for="{{item.photo}}" wx:for-index="childindex" wx:for-item="items"  src="{{items.imageName==null || items.imageName ==''?'/weixin/common/default_house_list_404.png': items.imageName}}" binderror="imgError" data-parent='{{index}}' data-imgindex="{{childindex}}"></image> 
          </view>
        </view>
      </scroll-view>
      </view>

    3、js

      data: {
        albumnIndex:0
      },
    
      albumtab:function(e){
        var index=e.currentTarget.dataset.index;
        // console.log(index)
        this.setData({
          albumnIndex:index
        })
      },

    4、css

    .albumList{position:fixed;left:0;top:0;z-index:10;background:#fff;width:100%;width:calc(100% - 32rpx);padding-left:32rpx;padding-top:30rpx;padding-bottom:10rpx;}
    .albumList scroll-view{width:100%;height:100%;white-space: nowrap;}
    .albumList .albumItem{display: inline-block;color:#999;font-size: 30rpx;margin-right:60rpx;}
    .albumList .albumItem.cur{color:#292B33;background:url("/weixin/bjnewhouse/bj_bottom.png") no-repeat bottom center;background-size:68rpx 20rpx;}
    
    .albumCon{width:calc(100% - 64rpx);padding:0 32rpx;height: calc(100% - 120rpx);position: fixed;bottom: 0;left: 0;}
    .albumConItem{margin-bottom: 55rpx;}
    .albumtitle{color:#000;font-size:32rpx;margin-bottom:30rpx;}
    .albumImg {/*justify-content: space-around;align-items: center;*/display: flex;flex-direction: row;flex-wrap: wrap;}
    ._between{justify-content:space-between;}
    .albumImg image{width:218rpx;height:169rpx;margin:5rpx;}
    .tui-city-scroll-y{height: 100%;  box-sizing: border-box;}

     

    展开全文
  • 小程序锚点标记

    千次阅读 2018-01-25 17:31:20
    下面是我用 wepy 做的 一个 锚点跳转 提取有用信息 即可 = 上代码: 锚点定位----------------------------------------------> style lang="less"> page { height: 100%; } .scr { position: fixed...
  • 之前公司的微信小程序,有城市列表选项,同时右侧需要一个锚点,能够快速找到相应拼音下的城市。如图, 在做完之后,发现在锚点上滑动时,城市列表并不会随着滑动相应改变。 通过多次的console.log()之后发现,...
  • 小程序锚点的使用

    2020-06-23 11:10:07
    <scroll-view scroll-into-view="{{toView}}" style="height:{{pageGaodu.windowHeight}}px" scroll-y="true" scroll-with-animation="true"> <view bindtap="wxpaley" data-havs="havs">...
  • uniapp-小程序锚点定位

    2021-04-26 09:19:08
    <!... <view class="performance-type-lists"> <view :class="type_id==1?'active':''" data-type_id=1 @tap="togglePosition" data-classname="performance-important-tips">...view
  • 菜单和列表都 使用scroll-view组件 通过下标 动态绑定元素 ...效果如下: <!--导航滚动 --> ...scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation=...
  • 1、锚点按钮 data-* 的值对应要跳转的锚点的id值 2、点击按钮时,将toView的值设置为当前点击的按钮的data-*的值(一定要用setData方法,不能直接用this.toView=... ,不然页面的值无法改变) 3、给需要跳转...
  • 微信小程序锚点定位楼层跳跃

    千次阅读 2017-05-16 13:21:57
    微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现 效果图如下: WXML: {{item.region}} {{item.name}} 自动定位 {{item.region}} WXSS: ...
  • }, // 选择左侧标签锚点定位 activeNav(e) { var index = e.currentTarget.dataset.index this.setData({ active: index, selectId: "item" + index }) }, //计算右侧每个锚点的高度 selectHeight() { var list = ...
  • 在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置。 比如在京东的商品详情页面,对于一般的PC端网页,只...6.设置锚点
  • 1.util.js var cityObj = [{ "id": "35", "provincecode": "150000", "city": "\u963f\u62c9\u5584\u76df", "code": "152900", "initial": "A" }, { "id": "38", "provincecode": "210000", "city": "\u978d\u5...
  • 使用场景:楼层之间的快速切换,锚点的跳转,点击字母滚动到相关的城市 原理解析 1.代码 1.1.wxml <view class='container'> <view class='left'> <scroll-view class='leftScroll' scroll-y&...
  • 引用微信小程序官方的 scroll-view 组件https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 主要通过更改:scroll-into-view="toView"的内容 很方便就 写出效果 记着加scroll-with-...
  • 主要为大家详细介绍了小程序实现锚点滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 325
精华内容 130
关键字:

小程序锚点