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

    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:""
    	})
    }
    
    展开全文
  • 菜单和列表都 使用scroll-view组件 通过下标 动态绑定元素 ...效果如下: <!--导航滚动 --> ...scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation=...
    1. 菜单和列表都 使用scroll-view组件
    2. 通过下标 动态绑定元素
    3. 添加点击事件 实现切换效果
    4. 效果如下:
      在这里插入图片描述
    <!--导航滚动  -->
    <scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
      <text bindtap="getStatus" id="NAV{{index}}" class="tui-nav-li {{index === status ? 'tui-nav-active' : ''}}" data-index="{{index}}" wx:for="{{navList}}" wx:key="">{{item}}</text>
    </scroll-view>
    
    <!--列表滚动区  -->
    <view class="tui-fixed-y">
      <scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
        <view wx:for="{{navList}}" wx:key="">
          <view id="NAV{{index}}" class="tui-list-head">{{item}}</view>
          <view class="tui-list-li">{{item}} 列表 {{index}}</view>
        </view>
      </scroll-view>
    </view>
    
    .tui-fixed-x{
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }
    .tui-city-scroll{
      height: 220rpx;
      line-height: 80rpx;
      width: 100%;
      white-space: nowrap;
    }
    .tui-city-scroll text{
      height: 120rpx;
      line-height: 80rpx;
      width: 100%;
      white-space: nowrap;
    }
    .tui-nav-li{
      font-size: 33rpx;
      padding: 0 10rpx;
    }
    .tui-nav-li:first-child{padding-left: 16rpx;}
    .tui-nav-li:last-child{padding-right: 16rpx;}
    .tui-nav-active{
      color: red;
      border-bottom: 3rpx solid red;
    }
    .tui-fixed-y{
      width: 100%;
      height: calc(100% - 80rpx);
      position: fixed;
      bottom: 0;
      left: 0;
    }
    .tui-city-scroll-y{
      padding: 0 20rpx;
      height: 100%;
      box-sizing: border-box;
    }
    .tui-list-head{
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 30rpx;
      color: blue;
    }
    .tui-list-li{
      height: 400px;
      padding: 10rpx;
      color: #fff;
      font-size: 50rpx;
      background-color: blue;
    }
    .btn{
      background-color: yellow;
      z-index: 1000;
      position: fixed;
      bottom: 0;
    }
    
    Page({
      data: {
        status: 0,
        navList: ['苹果', '香蕉', '橘子', '火龙果', '苹果2', '香蕉2', '橘子2', '火龙2果', '苹果3', '香蕉3', '橘子4', '火龙2果4']
      },
      getStatus(e) {
        this.setData({
          status: e.currentTarget.dataset.index
        })
      },
    
    })
    
    展开全文
  • 微信小程序锚点定位楼层跳跃

    千次阅读 2017-05-16 13:21:57
    微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现 效果图如下: WXML: {{item.region}} {{item.name}} 自动定位 {{item.region}} WXSS: ...

    微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃:

    利用:scroll-into-view 来实现


    效果图如下:


    WXML:

    <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
      <view wx:for="{{act_addList}}">
        <view class="address_top" id="{{ 'inToView'+item.id}}">{{item.region}}</view>
        <view wx:for="{{item.city}}">
          <view class="address_bottom">{{item.name}}</view>
        </view>
      </view>
    </scroll-view>
    
    <view class="orientation_region">
      <view class="orientation">自动定位</view>
      <block wx:for="{{orientationList}}" >
        <view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>
      </block>
    </view> 



    WXSS:

    page{ height: 100%;}
    .content{padding-bottom: 20rpx; box-sizing: border-box; height: 100%;}
    .location{width: 100%;}
    .location_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #606660;font-size: 28rpx;padding: 0 20rpx;}
    .location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size: 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid;padding: 0 20rpx; align-items: center;display: -webkit-flex;}
    .address_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #999999;font-size: 28rpx;padding: 0 20rpx;}
    .address_bottom{height: 88rpx;line-height: 88rpx; background: #fff;color: #000000;font-size: 32rpx;padding: 0 20rpx; border-bottom: 2rpx #ebebeb solid;margin-left: 20rpx;margin-right: 50rpx; }
    .location_img{width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 125rpx;}
    .add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #ebebeb; color: #000000;margin-right: 20rpx; }
    .add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}
    .orientation{white-space:normal;display: inline-block; width: 55rpx;height:58rpx; color: #999; text-align: center;}
    .orientation_region{ width: 55rpx;font-size: 20rpx;position: fixed;top: 220rpx; right: 0rpx;}
    .orientation_city{height: 50rpx; line-height: 50rpx;color: #000;text-align: center;}


    JS:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        orientationList: [
          { id: "01", region: "东北" },
          { id: "02", region: "华北" },
          { id: "03", region: "华东" },
          { id: "04", region: "华南" },
          { id: "05", region: "华中" },
          { id: "06", region: "西北" },
          { id: "07", region: "西南" }
        ],
        act_addList: [
          {
            id: "01", region: "东北地区",
            city: [{ id: "0101", name: "白山江源" },
            { id: "0102", name: "白山市" },
            { id: "0103", name: "宾县" },
            { id: "0104", name: "大庆" },
            { id: "0105", name: "测试1" },
            { id: "0106", name: "测试2" },
            { id: "0107", name: "测试3" },
            { id: "0108", name: "测试4" },
            { id: "0109", name: "测试5" },
            { id: "0110", name: "测试6" },
            ]
          },
          {
            id: "02", region: "华北地区",
            city: [{ id: "0201", name: "包头" },
            { id: "0202", name: "保定" },
            { id: "0206", name: "测试2" },
            { id: "0207", name: "测试3" },
            { id: "0208", name: "测试4" },
            { id: "0209", name: "测试5" },
            { id: "0210", name: "测试6" },
    
            ]
          },
          {
            id: "03", region: "华东地区",
            city: [{ id: "0303", name: "开封市" },
            { id: "3104", name: "安阳市" },]
          },
          {
            id: "04", region: "华南地区",
            city: [
              { id: "0401", name: "黑龙江市" },
              { id: "0407", name: "测试3" },
              { id: "0508", name: "测试4" },
              { id: "0609", name: "测试5" },
              { id: "0710", name: "测试6" },
              { id: "0711", name: "测试8" },
              { id: "0712", name: "测试9" },
              { id: "0713", name: "测试10" },
              { id: "0714", name: "测试11" },
            ]
          },
          { id: "05", region: "华中地区", city: [{ id: "0501", name: "黑龙江市" }] },
    
          {
            id: "06", region: "西北地区",
            city: [{ id: "0603", name: "开封市" },
            { id: "0604", name: "安阳市" },]
          },
          {
            id: "07", region: "西南地区",
            city: [{ id: "0703", name: "开封市" },
            { id: "0704", name: "安阳市" },
            { id: "0401", name: "黑龙江市" },
            { id: "0407", name: "测试3" },
            { id: "0508", name: "测试4" },
            { id: "0609", name: "测试5" },
            { id: "0710", name: "测试6" },
            { id: "0711", name: "测试8" },
            { id: "0712", name: "测试9" },
            { id: "0713", name: "测试10" },
            { id: "0714", name: "测试11" },
            { id: "0401", name: "黑龙江市" },
            { id: "0407", name: "测试3" },
            { id: "0508", name: "测试4" },
            { id: "0609", name: "测试5" },
            { id: "0710", name: "测试6" },
            { id: "0711", name: "测试8" },
            { id: "0712", name: "测试9" },
            { id: "0713", name: "测试10" },
            { id: "0714", name: "测试11" },
            ]
          },
        ],
        toView: 'inToView01',
      },
    
      scrollToViewFn: function (e) {
        var _id = e.target.dataset.id;
        this.setData({
          toView: 'inToView' + _id
        })
        console.log(this.data.toView)
    
      },
      onLoad: function (options) {
    
      }
    
    
    })


    展开全文
  • 在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置。 比如在京东的商品详情页面,对于一般的PC端网页,只需要使用 ,然后在地址栏...

    在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置。

    比如在京东的商品详情页面,对于一般的PC端网页,只需要使用 ,然后在地址栏最后加上#element_Id,就能很方便的跳转到该元素的位置。

    1.将page的高度设置为100%;

    2.导航下面的内容部分必须用 包起来

    3.设置scroll-view的高度=屏幕的高度-导航的高度

    4.设置scroll-view的属性 scroll-into-view="{{toView}}"

    5.设置scroll-view的属性 scroll-y=“true”

    6.设置锚点

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 此demo 为微信小程序demo代码,基于scroll-view 来实现小程序页面的锚点定位,摘要摘要摘要
  • 主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料,需要的朋友可以参考下
  • 小程序实现锚点定位

    2019-10-06 19:26:26
    小程序中要实现锚点定位,需要使用到组件scroll-view 点击查看scroll-view组件官网文档 需要用到的是scroll-into-view这条属性,这条属性的官网解释是这样的: scroll-into-viewString值应为某子元素id(id不能...
  • 微信小程序滚动锚点定位实现

    千次阅读 2019-05-03 20:59:56
    最近开发了一款商城小程序,打算整理一下商城小程序遇到的难点和解决方法。 好多网页页面元素非常多,信息量也非常大,用户在使用过程中可以通过页面导航实现快速的切换,而无需用户来回滚动鼠标,极大提高了用户的...
  • 微信小程序-锚点定位

    2019-01-23 09:43:08
    引言:在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置,比如京东的商品详情页面 ...查找微信小程序的开发文档,发现...
  • 小程序实现锚点定位商品详情页

    千次阅读 2018-05-12 14:45:01
    wxml: &lt;view class="tab-item {{top&lt;block_2ScrollTop-60?'active':''}}" bindtap="toblock1"&gt;商品&lt;/view&gt; &lt;view class="...to
  • //字母锚链定位 topZmClick: function (event) { var letter = event.currentTarget.dataset.letter; this.setData({ toView: letter }) }, wxss: scroll-view { height: 600px; } 注:scroll-view...
  • 小程序scoll-view锚点定位: <view class='flex content section'> // 左边栏布局 <view class='left'> <view catchtap='anchor' data-opt='zhichangUp' class="item {{ toTab=='zhichangUp'?'...
  • 1、小程序导航栏+锚点定位:wxml <view class="container"> <view class="navigate"> <view class="title"> <view class="title {{actionView=='product'?'checked':''}}" bindtap=...
  • 小程序中要实现锚点定位,需要使用到组件 scroll-view 需要用到的是 scroll-into-view 这条属性,这条属性的官网解释是这样的: scroll-into-view String 值应为某子元素id(id不能以数字开头)。设置哪个方向可...
  • 之前两篇文章分别介绍了锚点定位和滑动内容影响导航选中,这里我们就结合起来,实现这两个功能! 思路不再多说,直接上干货! WXML <view class="navigateBox"> <view class="title"> <image wx:...
  • 小程序锚点标记

    千次阅读 2018-01-25 17:31:20
    下面是我用 wepy 做的 一个 锚点跳转 提取有用信息 即可 = 上...锚点定位----------------------------------------------> style lang="less"> page { height: 100%; } .scr { position: fixed; left: 0; t
  • scroll-view实现滚动和锚点必须设置高度,但是页面高度没有确定的情况,这种方法就没有办法实现功能,针对这种情况找到一种方法实现锚点定位就很重要了,查找相关内容,使用的方法都为scroll-view方式,不够灵活。...
  • 这里说一下如何实现页面锚点跳转,一个商品分类的效果示意图如下:因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来。所以追梦猪结合scroll-...

空空如也

空空如也

1 2 3 4 5
收藏数 86
精华内容 34
关键字:

小程序锚点定位