精华内容
下载资源
问答
  • 菜单和列表都 使用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.设置锚点

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料,需要的朋友可以参考下
  • [导读]这篇文章主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃:利用:scroll-into-view 来实现效果图如下:WXML:{{item.region}}{{item.name}}...

    [导读]这篇文章主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料

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

    利用:scroll-into-view 来实现

    效果图如下:

    2017518141733130.gif?2017418141752

    WXML:

    {{item.region}}

    {{item.name}}

    自动定位

    {{item.region}}

    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) {

    }

    })

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

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

    千次阅读 2019-05-03 20:59:56
    最近开发了一款商城小程序,打算整理一下商城小程序遇到的难点和解决方法。 好多网页页面元素非常多,信息量也非常大,用户在使用过程中可以通过页面导航实现快速的切换,而无需用户来回滚动鼠标,极大提高了用户的...
  • //字母锚链定位 topZmClick: function (event) { var letter = event.currentTarget.dataset.letter; this.setData({ toView: letter }) }, wxss: scroll-view { height: 600px; } 注:scroll-view...
  • 之前两篇文章分别介绍了锚点定位和滑动内容影响导航选中,这里我们就结合起来,实现这两个功能! 思路不再多说,直接上干货! WXML <view class="navigateBox"> <view class="title"> <image wx:...
  • 微信小程序中是没有办法使用a标签来实现锚点跳转这个功能的。但是呢也有很多办法可以解决。 按钮的代码就是一个点击然后传参,参数就是需要跳转的id属性,特别注意的是SkipSite 最好动态传参,可以参考我下面的...
  • 这里说一下如何实现页面锚点跳转,一个商品分类的效果示意图如下:因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来。所以追梦猪结合scroll-...
  • 微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现; 效果图: wxml: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-...
  • 最近在学习微信小程序,想到这个功能用到的地方应该不少就找了很多博客和文档看看,做了一个简易版的,如果有更好的方法或者建议,请告知,多谢! 先上效果图 相对于vue,微信小程序真是简单很多啊,我们只...
  • 代码地址如下:http://www.demodashi.com/demo/14009.html 一、前期准备工作 软件环境:微信开发者工具 ...1、基本需求。 基于scroll-view实现锚点定位 2、案例目录结构 二、程序实现具体步骤 1.锚点i...
  • 使用scroll-view进行锚点定位,索要跳转的元素,必须包含在这个组件里边,也就是最外层是scroll-view; 使用scroll-y 和 scroll-into-view 这两个属性,必须让 scroll-into-view组件内部的子元素 的 id 值等于 scroll...
  • 实现跳转,小程序中则是用scroll-to-view来实现. 将整个页面最外层的view替换为scroll-view,同时需设置高度,此高度要设置为移动设备可视区域高度(注意不能设置为100%,那是整个页面的高度,包括屏幕之外看不到的...

空空如也

空空如也

1 2 3
收藏数 46
精华内容 18
关键字:

微信小程序锚点定位

微信小程序 订阅