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 () { } })
效果图:
分类:
微信/小程序
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签