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

    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;}

     

    展开全文
  • 之前公司的微信小程序,有城市列表选项,同时右侧需要一个锚点,能够快速找到相应拼音下的城市。如图, 在做完之后,发现在锚点上滑动时,城市列表并不会随着滑动相应改变。 通过多次的console.log()之后发现,小...

    之前公司的微信小程序,有城市列表选项,同时右侧需要一个锚点,能够快速找到相应拼音下的城市。如图,
    在这里插入图片描述在做完之后,发现在锚点上滑动时,城市列表并不会随着滑动相应改变。
    通过多次的console.log()之后发现,小程序中,bindtouchmove并不会随着当前touch点来改变相应res中的内容。因为是公司内容,就不放代码,只提供一种思路,可以在锚点内部bindtouchstart,来获取初始点,然后在外部的view bindtouchmove,获取滑动的距离,再根据距离一个锚点高度的逻辑,判断出当前手指所在位置。给一个我的效果图:
    在这里插入图片描述
    如果有什么疑问,可以联系我。

    展开全文
  • 微信小程序锚点定位楼层跳跃

    千次阅读 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) {
    
      }
    
    
    })


    展开全文
  • 菜单和列表都 使用scroll-view组件 通过下标 动态绑定元素 ...效果如下: <!--导航滚动 --> ...scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation=...
  • }, // 选择左侧标签锚点定位 activeNav(e) { var index = e.currentTarget.dataset.index this.setData({ active: index, selectId: "item" + index }) }, //计算右侧每个锚点的高度 selectHeight() { var list = ...
  • 在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置。 比如在京东的商品详情页面,对于一般的PC端网页,只...6.设置锚点
  • 1、锚点按钮 data-* 的值对应要跳转的锚点的id值 2、点击按钮时,将toView的值设置为当前点击的按钮的data-*的值(一定要用setData方法,不能直接用this.toView=... ,不然页面的值无法改变) 3、给需要跳转...
  • 引用微信小程序官方的 scroll-view 组件https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 主要通过更改:scroll-into-view="toView"的内容 很方便就 写出效果 记着加scroll-with-...
  • 主要为大家详细介绍了微信小程序实现锚点功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了微信小程序实现锚点跳转的具体代码,供大家参考,具体内容如下 1、先上效果图,看看是不是你想要的。 2、主要用到的微信小程序的scroll-view 组件实现该效果。核心主要是使用scroll-into-view...
  • 主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料,需要的朋友可以参考下
  • [导读]这篇文章主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃:利用:scroll-into-view 来实现效果图如下:WXML:{{item.region}}{{item.name}}...
  • 微信小程序-锚点定位

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

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

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 136
精华内容 54
关键字:

微信小程序锚点

微信小程序 订阅