dorado blockView

最新推荐文章于 2022-05-31 10:28:02 发布

原创最新推荐文章于 2022-05-31 10:28:02 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

dorado 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了一种自定义BlockView组件的方法，包括组件的创建、初始化及样式设定等内容。通过对BlockView组件进行编程，实现了特定功能的布局展示，并设置了交互效果。

//@Bind #blockView.onCreate
!function(self,arg){
	var items=[{
			content:"100元",
		},{
			content:"200元",
		},{
			content:"300元",
		}];
	self.set({
		items:items,
		//如果要设置左缩进时，设置width+paddingLeft
	});
		
};
//@Bind #blockView.onReady
!function(self,arg){
	//将第一个子元素初始化为当前元素
	self.setCurrentItemDom(self._itemDomMap[0]);
};
//设置块悬停hover时，无背景变化
//@Bind blockView.onRenderCell
!function(self,arg){
	$(arg.dom).empty().xCreate([{}]);
	arg.dom.style.background="white";
}

/*blockView块*/
.d-block-view .block {
	/*带边框*/
	border:1px #E8E8E8 solid;
}
/*点击blockView的块后，字体颜色变成蓝色*/
.d-block-view .block-current {
    color: blue;
    border:1px blue solid;
}