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

hnytkeok

按版主的做法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

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

liangyongfei

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

我在试一下

hnytkeok

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

liangyongfei

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

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

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

hnytkeok

要这样的样式

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

liangyongfei

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

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

hnytkeok

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

2015-12-23 21:06 上传

点击文件名下载附件
附件已上传

我要的是这个效果    在<li>的节点 上加了float:left 也就是可以使一行显示二个图片，但list的单击事件失效，不能查看大图了，如果去掉<li>的节点 上的float:left  一行只显示一张图片，如图 list的单击事件有效，还可以查看大图片，  但不是我想要的效果，我想要实现 ，一行显示二张图片，并且单击小图片可以查看大图，这个程序是我原wex53.2里面的，可以好好的运行，但到了wex53.2.1后 如果一行显示二张图片情况下，list的单击事件就不能用了。

xiaoqinhy

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