list 一行显示多条记录。list的单击事件失效

hnytkeok · 发表于 2015-12-22 22:14:05

本帖最后由 hnytkeok 于 2015-12-23 16:43 编辑

按版主的做法http://doc.wex5.com/?p=4784#4.3

只需要在list组件里面的li节点上的style属性中增加width和float:left即可，width可以是百分比，也可以是固定值。

增加了 float:left 之后 list的单击就失效了，去掉 float:left 这个之后单击才可以用，但一行只能显示一条记录，为何？
我要实现，一行显示二个图片，单击小图可以查看大图，在wex53.2里面是没有问题的，但在3.2.1里面就会出现这个问题，list的单击不能正常使用了。后来发现是float:left 这个影响。如何处理呢?

xiaoqinhy · 发表于 2015-12-23 08:59:17

一行显示多个这种处理我一般都是用bootstrap里的栅格化布局来做的

liangyongfei · 发表于 2015-12-23 10:51:22

list横向滚动这样做试试

<div component="$UI/system/components/justep/list/list"
class="x-list x-scroll-h" data="newsData" style="overflow-x:auto;">
  <div class="x-list-template" style="width: 2500px;">
   <img src="" alt="" bind-attr-src="$model.getImageUrl($object)"/>
  </div>
</div>

关键点：
1、如果放在contents组件内需要增加class=x-scroll-h才能横向滚动
2、设置出滚动条的层style="overflow-x:auto;"
3、设置有图片的容器固定宽度

hnytkeok · 发表于 2015-12-23 14:07:12

我在试一下

hnytkeok · 发表于 2015-12-23 14:31:36

不行啊，一行不能多条记录显示的。

liangyongfei · 发表于 2015-12-23 15:27:25

hnytkeok 发表于 2015-12-23 14:31
不行啊，一行不能多条记录显示的。

本地测试/UI2/system/components/justep/list/demo/news.w没问题啊

你可以覆盖这几个文件，自己浏览器运行试试！

hnytkeok · 发表于 2015-12-23 16:14:19

要这样的样式

版主好，我要是这样的格式，在wex53.2中是可以的，我点击小图可以显示大图，但现在不行了，list的单击事件不能正常使用了。

liangyongfei · 发表于 2015-12-23 17:11:57

hnytkeok 发表于 2015-12-23 16:14
版主好，我要是这样的格式，在wex53.2中是可以的，我点击小图可以显示大图，但现在不行了，list的单击事 ...

把你的文件发来，最好做个可运行案例，本地研究下，看行吗

hnytkeok · 发表于 2015-12-23 21:12:58

本帖最后由 hnytkeok 于 2015-12-23 21:14 编辑

soa.rar (4.07 KB, 下载次数: 200)

xiaoqinhy · 发表于 2015-12-24 09:38:24

scrollview里面放row是为了"加载更多"能正确显示，所有元素的样式都默认的，一排显示几个只要改改image外面的col就ok，栅格化一行是12，想要一排1、2、3、4、6个随便都可以，甚至不同屏幕宽度都可以个性化，bootstrap很好用啊。
但这都不是重点，重点是list单击事件必须可以用啊，不信你alert一下。

		自动登录	找回密码
密码			注册

[处理中6] list 一行显示多条记录。list的单击事件失效

点评