随笔 - 419  文章 - 3  评论 - 331  阅读 - 120万

scroll-view 组件里的 scroll-into-view 属性实例

微信小程序的scroll-view组件中,scroll-into-view 属性可以指定滚动到指定id的位置。

<scroll-view class="content" scroll-y scroll-into-view="{{ intoIndex }}" scroll-with-animation> 

intoIndex 值应为某子元素id(id不能以数字开头),设置哪个方向可滚动,则在哪个方向滚动到该元素。scroll-y 是滑动方向。

下面写个简单的小实例,方便大家理解。

wxml:

复制代码
<view class="box">
  <scroll-view class="nav" scroll-y>
    <view class="item {{indexId == index ? 'current' : ''}}" wx:for="{{navList}}" bindtap="scrollClick" data-id="{{index}}">{{index}}-{{item}}</view>
  </scroll-view>

  <scroll-view class="content" scroll-y scroll-into-view="{{intoIndex}}" scroll-with-animation> 
    <view wx:for="{{contentList}}" id="item{{index}}">{{index}}-{{item}}</view>
  </scroll-view>
</view>
复制代码

css:

复制代码
.nav {
  margin-top:100rpx;
  width: 20%;
  height: 100vh;
  background: pink;
  text-align: center;
}
.nav .item {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1px solid #ebebeb;
  background: #fafafa;
}
.nav .current{
  color:red;
}

.content {
  width: 75%;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 55px;
  margin: 0 20rpx 0 20rpx;
  box-sizing: border-box;
}
.content view {
  height: 200rpx;
  line-height: 200rpx;
  border: 1px solid #ccc;
  border-radius: 20rpx;
  margin-top: 20rpx;
  text-align: center;
}
复制代码

js:

复制代码
Page({

  /**
   * 页面的测试数据
   */
  data: {
    navList: ["饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料","饮料"],
    contentList: ["可乐", "雪碧", "芬达", "七喜", "冰红茶", "冰绿茶", "茉莉花茶", "柠檬茶", "果粒橙", "茉莉蜜茶", "柠檬红茶", "脉动", "红牛", "酸梅汤", "北冰洋", "九龙斋", "王老吉", "沙棘汁", "鲜橙多", "元气森林", "健力宝", "加多宝", "东方树叶", "乌龙茶", "茉莉绿茶", "宝矿力", "拿铁咖啡", "摩卡咖啡", "生椰拿铁", "冰吸生椰", "美式咖啡", "焦糖玛奇朵", "燕麦拿铁", "丝绒拿铁", "香草拿铁", "榛果拿铁", "卡布奇诺", "冷萃咖啡", "海盐焦糖", "绵云拿铁", "生酪拿铁", "厚乳拿铁", "抹茶燕麦拿铁",  "珍珠奶茶", "鲜百香双响炮", "奶茶三兄弟", "椰果奶茶", "鲜百香双响炮", "金钻奶茶", "珍珠奶茶", "布丁奶茶", "奶茶三兄弟", "双拼奶茶", "鲜百香双响炮", "奶茶三兄弟", "烧仙草奶茶", "鲜百香双响炮", "红豆奶茶", "珍珠奶茶", "巧克力奶茶", "奶茶三兄弟"],
    intoIndex: '',
    indexId: 0
  },
  scrollClick: function (e) {
    this.setData({
      intoIndex: "item" + e.currentTarget.dataset.id,
      indexId: e.currentTarget.dataset.id
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
复制代码

效果图:

 

posted on   JoeYoung  阅读(2234)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示