用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序,新添加的元素保持在底部

纸飞机 2018-3-6 16:11

分享者:wy_Blog,来自原文地址 点击添加按钮,新添加的元素保持在底部小demo的实现WXML代码: 添加 item {{index}}--{{item.place}} WXSS代码:page{height: 100%;} .scroll{height:400rpx; ...

分享者:wy_Blog,来自

原文地址


点击添加按钮,新添加的元素保持在底部小demo的实现

WXML代码:

  1. type="primary" bindtap="addItemFn">添加
  2. class="scroll" scroll-y="true" scroll-top="{{scrollTop}}" >
  3. class="classname">
  4. wx:for="{{lists}}" wx:key="*this">
  5. class="item" data-index="{{index}}" id="item{{index}}">item {{index}}--{{item.place}}

WXSS代码:

  1. page{height: 100%;}
  2. .scroll{height:400rpx; border: 2px solid #f00;}
  3. .item{ background: #ddd; margin: 10px 0; height: 40px;}

JS代码:

  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. data: {
  5. lists: [
  6. { place: "北京" },
  7. { place: "深圳" },
  8. { place: "上海" },
  9. { place: "广州" },
  10. { place: "珠海" }
  11. ],
  12. //记录item个数
  13. itemCount: 5,
  14. scrollTop: 100,//设置滚动条到顶部的距离
  15. },
  16. //事件处理函数
  17. addItemFn: function () {
  18. var {lists, itemCount} = this.data;
  19. var newData = { place: "default" };
  20. lists.push(newData);
  21. this.setData({
  22. lists: lists,
  23. itemCount: itemCount,
  24. })
  1. //单独拿出来用setData 放一个里会出现问题
  2. this.setData({
  3. scrollTop: this.data.scrollTop + 50 // 50代表你要添加的元素的高度
  4. })
  5. },
  6. })
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏