CSS3 弹性盒子(Flex Box) 微信小程序图片通栏
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>chkUrl--脚本管理</title>
<link rel="stylesheet" href="/static/WeUI_files/weui.css">
<link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;"> {{/*{{range .}}*/}}
{{/*{{.}}*/}}
{{/*{{.Host}}*/}}
{{/*{{end}}*/}} <div class="weui-cells page__category-content">
<div class="page__hd">
<h1 class="page__title">chkUrl</h1>
<p class="page__desc">检测url状态信息</p>
</div>
<div class="page__bd">
{{/*<div class="weui-cells__title">带说明的列表项</div>*/}}
<div class="weui-cells">
{{/*<div class="weui-cell">*/}}
{{/*<div class="weui-cell__bd">*/}}
{{/*<p>标题文字</p>*/}}
{{/*</div>*/}}
{{/*<div class="weui-cell__ft">说明文字</div>*/}}
{{/*</div>*/}} {{range .}}
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd" style="transform: translateX(-68px)">
<div class="weui-cell" style="padding-left: 68px">
<p> {{.Host}}</p>
<p> {{.Port}}</p>
<div class="weui-cell__ft"> {{.Path}}</div>
<div class="weui-cell__ft"> {{.ScriptName}}</div> <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;">
</div> </div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">运行</a>
</div>
</div>
</div> {{end}} </div>
</div> {{range .}}
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">{{.Host}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Port}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Path}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.ScriptName}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*" value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;"></div>
</div>
<div class="weui-flex__item">
<div class="placeholder"><a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">运行</a>
</div>
</div>
</div>
{{end}}
{{/*<div class="page flex js_show">*/}}
{{/*<div class="page__hd">*/}}
{{/*<h1 class="page__title">Flex</h1>*/}}
{{/*<p class="page__desc">Flex布局</p>*/}}
{{/*</div>*/}}
{{/*<div class="page__bd page__bd_spacing">*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*</div>*/}}
{{/*<div class="page__ft j_bottom">*/}}
{{/*<a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>*/}}
{{/*</div>*/}}
{{/*</div>*/}} </body>
</html>
{{end}}
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>chkUrl--脚本管理</title>
<link rel="stylesheet" href="/static/WeUI_files/weui.css">
<link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
{{/*{{range .}}*/}}
{{/*{{.}}*/}}
{{/*{{.Host}}*/}}
{{/*{{end}}*/}}
<div class="weui-cells page__category-content">
<div class="page__hd">
<h1 class="page__title">chkUrl</h1>
<p class="page__desc">检测url状态信息</p>
</div>
<div class="page__bd">
{{/*<div class="weui-cells__title">带说明的列表项</div>*/}}
<div class="weui-cells">
{{/*<div class="weui-cell">*/}}
{{/*<div class="weui-cell__bd">*/}}
{{/*<p>标题文字</p>*/}}
{{/*</div>*/}}
{{/*<div class="weui-cell__ft">说明文字</div>*/}}
{{/*</div>*/}}
{{range .}}
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd" style="transform: translateX(-68px)">
<div class="weui-cell" style="padding-left: 68px">
<p> {{.Host}}</p>
<p> {{.Port}}</p>
<div class="weui-cell__ft"> {{.Path}}</div>
<div class="weui-cell__ft"> {{.ScriptName}}</div>
<input class="weui-input" type="number" pattern="[0-9]*" value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;">
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">运行</a>
</div>
</div>
</div>
{{end}}
</div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
<div class="weui-cell weui-cell_swiped">
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">{{.Host}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Port}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Path}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.ScriptName}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;"></div>
</div>
<div class="weui-flex__item">
<div class="placeholder">
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
style="color: #FFF;text-align: center;">运行</a>
</div>
</div>
</div>
</div>
{{end}}
</div>
{{/*<div class="page flex js_show">*/}}
{{/*<div class="page__hd">*/}}
{{/*<h1 class="page__title">Flex</h1>*/}}
{{/*<p class="page__desc">Flex布局</p>*/}}
{{/*</div>*/}}
{{/*<div class="page__bd page__bd_spacing">*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*</div>*/}}
{{/*<div class="page__ft j_bottom">*/}}
{{/*<a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>*/}}
{{/*</div>*/}}
{{/*</div>*/}}
</body>
</html>
{{end}}
img{
flex: 1 100%;
}
CSS3 弹性盒子(Flex Box) 微信小程序图片通栏的更多相关文章
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
- 微信小程序图片放大预览
需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...
- 微信小程序 图片裁剪
微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...
- 微信小程序图片保存到本地
微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...
- 微信小程序图片上传和裁剪
本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...
- 关于微信小程序图片失真的解决方案
今天来说一说 关于微信小程序的图片失真问题的解决,微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域:如下 但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一 ...
- 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...
- 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...
随机推荐
- POJ 1887 Testing the CATCHER
Testing the CATCHER Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 13396 Accepted: 4 ...
- 最近项目中公用的JS
var closeid = 1; var isneedpwd = 0; var editor1; var NoCheckUrl = 0;//适用于框架 不验证权限 !=0验证 function Erp ...
- Apple Pay强势来袭，开发者应做的事情（转）
"iOS8.1就已经有这个功能了,只是木有现在这么的火,现在的趋势是要火的节奏,因此很多电商平台B2B,P2P,C2C,X2X都有可能需要这个屌丝的付款功能了,在此简单的研究一下." ...
- iOS学习笔记06-手势识别
一.UIGestureRecognizer简单介绍 我们已经学习了触摸事件处理,但触摸事件处理起来很麻烦,每个触摸事件处理都需要实现3个touches方法,比较繁琐,实际上我们可以使用更加简单的触摸事 ...
- 史上最详细的linux关于connect: network is unreachable 问题的解决方案
1.虚拟机常用连接网络方式有两种:桥接和NAT. 使用桥接模式:则保证虚拟机的网段与物理机的网段保持一致.如下: 虚拟机网卡配置: 物理机使用WiFi接入网络(我用的是WiFi,你们可能用的是有线道理 ...
- 染色（bzoj 2243）
Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“ ...
- MongoDB增删改查操作详解（命令行）
一.插入 MongoDB的插入操作很简单,使用insert方法,这里演示从创建数据库.创建集合到插入文档.查询文档. 集合创建方法参数说明: size:集合最大空间 max:集合最多文档数量 (超出s ...
- 多线程环境下 cpu % 分析
1. top -H(查看阻塞进程,线程) 2. jstack pid(查看堆栈信息) 另附 利用 Java dump 进行 JVM 故障诊断 http://www.blogjava.net/yuwe ...
- 【Android】状态栏通知Notification、NotificationManager详解（转）
在Android系统中,发一个状态栏通知还是很方便的.下面我们就来看一下,怎么发送状态栏通知,状态栏通知又有哪些参数可以设置? 首先,发送一个状态栏通知必须用到两个类: NotificationMa ...
- 当传入数据只有一个时mybatis中<if>判断会出现There is no getter for property named 'subjectId' in 'class java.lang.Intege
用"_parameter"代替当前参数 正确: <select id="selectSubjectByPId" parameterType="j ...