- Foxtable(狐表) (http://foxtable.net/bbs/index.asp)
-- 专家坐堂 (http://foxtable.net/bbs/list.asp?boardid=2)
---- weUI中grid每行的数量如果控制? (http://foxtable.net/bbs/dispbbs.asp?boardid=2&id=154172)
-- 发布时间：2020/9/7 9:46:00
-- weUI中grid每行的数量如果控制?
此主题相关图片如下：weui.jpg
如上图例子,生成的手机页面是每行三个单元格,如果要每行四个单元格是在哪里控制?而且根据不同的手机大小也可以自适应,
谢谢!
-- 发布时间：2020/9/7 10:36:00
--
Select Case e.Path
Case "test.htm"
Dim wb As New WeUI
wb.AppendHTML("<style>.weui_grid{width: 25%;}</style>",True) \'每个格子1/4
wb.AddPageTitle("","pageheader","WeUI","微信网页设计样式库")
With wb.AddGrid("","g1")
.Add("c1","Button", "./images/button.png").Attribute = ""
.Add("c2","Cell", "./images/cell.png", "http://www.foxtable.com")
.Add("c3","Toast", "./images/toast.png", "http://www.foxtable.com")
.Add("c4","Dialog", "./images/dialog.png", "http://www.foxtable.com")
.Add("c5","Progress", "./images/progress.png", "http://www.foxtable.com")
.Add("c6","Msg", "./images/msg.png", "http://www.foxtable.com")
.Add("c7","Article", "./images/article.png", "http://www.foxtable.com")
.Add("c8","ActionSheet", "./images/actionSheet.png", "http://www.foxtable.com")
.Add("c9","Icons", "./images/icons.png", "http://www.foxtable.com")
.Add("c10","Panel", "./images/panel.png", "http://www.foxtable.com")
.Add("c11","Tab", "./images/tab.png", "http://www.foxtable.com")
.Add("c12","SearchBar", "./images/search.png", "http://www.foxtable.com")
End With
e.WriteString(wb.Build)
End Select
如果要自适应
wb.AppendHTML("<style>@media (min-width: 640px) {.weui_grid{width: 25%;}</style>",True) \'当页面宽度大于640时设置为一行4格
-- 发布时间：2020/9/7 20:54:00
--
另外请教一下,传统的html文件中如下的这些抬头css样式文件在WeUI里面怎么使用,
<head>
<meta charset="UTF-8">
<title>订单列表</title>
<meta name="viewport" c />
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../fonts/iconfont/iconfont.css" rel="stylesheet" />
<link href="../css/fox.tools.css" rel="stylesheet" />
</head>
如上面的代码,直接在每个网页的前面类似这样加就可以吗?
wb.AppendHTML("<style>.weui_cells_title{margin:0px;height:32px;background-color:" & cl_b & ";color:" & cl_f & "}</style>")
谢谢!
-- 发布时间：2020/9/7 21:36:00
--
参考：http://www.foxtable.com/mobilehelp/topics/0061.htm