微信小程序实现锚点定位
博客专区 > 别寒 的博客 > 博客详情
微信小程序实现锚点定位
别寒 发表于1年前
微信小程序实现锚点定位
  • 发表于 1年前
  • 阅读 176
  • 收藏 0
  • 点赞 0
  • 评论 2

新睿云服务器60天免费使用,快来体验!>>>   

wxml:

<!--index.wxml-->
<view class="container">
<!--品牌-->
<scroll-view scroll-y="true" scroll-into-view="{{toView}}"> 
  <view wx:for="{{citysMap}}">
    <view class="ncq-smal" id="{{index}}">
      {{index}}
    </view>
    <view wx:for="{{item}}" wx:for-item="citys" class="ncq-box" 
         data-cityname="{{citys.city_name}}" bindtap="cityNameClick">
            <label class="ncq-brand-name">{{citys.city_name}}</label>
    </view>
  </view>
</scroll-view>
 <!--  字母导航-->
    <view class="ncq-fixe-nav">
            <view  wx:for="{{citysMap}}" data-letter="{{index}}" bindtap="rightZmClick">
                <label>{{index}}</label> 
            </view>
    </view>
   <!-- 字母导航end-->
</view>

js:

  //字母锚链定位
  topZmClick: function (event) {
    var letter = event.currentTarget.dataset.letter;
    this.setData({
      toView: letter
    })
  },

wxss:

scroll-view {
  height: 600px;
}

注:scroll-view必须要设置高度,不然无效

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 28
博文 254
码字总数 130346
评论 (2)
知晓程序
你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布。此外,由于第三方同步抓取功能,您的内容也可能会被同步发表到今日头条、搜狐、网易号等,我们会注明来源和作者姓名。

非常感谢~~~
别寒

引用来自“知晓程序”的评论

你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布。此外,由于第三方同步抓取功能,您的内容也可能会被同步发表到今日头条、搜狐、网易号等,我们会注明来源和作者姓名。

非常感谢~~~

回复@知晓程序 : 谢谢你的喜欢,有需要的话可以转载,多谢分享。还有,请问可以注明我的名字吗?我的名字是何洪波,qq:1654605193
×
别寒
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: