微信小程序使用scroll-view 标签实现内容上下或左右滑动

news/2024/7/20 3:49:17 标签: 小程序, 微信, html5

scroll-view标签微信官方介绍
scroll-view标签属性 : scroll-x 为x轴(左右滑动),scroll-y为y轴(上下滑动)

左右滑动

scroll-view标签需要设置white-space: nowrap;里面的元素要设置为行内块元素

html
<scroll-view scroll-x >
  <view class="templateitem" v-for="(item,index) in xxx"  style=" width: 200px; height: 200px; background: green;">	
      <image class="live" src="item.url"></image>			 
   </view>
</scroll-view>

css
scroll-view {
	white-space: nowrap; //不换行
}
.templateitem{
	display: inline-block; //行内块元素
	width:102px;
	height:187px;
}

上下滑动

scroll-view 标签要有一个高度

html
<scroll-view scroll-y >
  <view class="templateitem" v-for="(item,index) in xxx"  style=" width: 200px; height: 200px; background: green;">	
      <image class="live" src="item.url"></image>			 
   </view>
</scroll-view>

css
scroll-view {
	height:500px;
}
.templateitem{
	width:100%;
	height:187px;
}

http://www.niftyadmin.cn/n/874920.html

相关文章

js 防抖和节流的方法

防抖 /** fun [function] 需要防抖的函数* delay [number] 毫秒&#xff0c;防抖期限值*/ function debounce(fun, delay 300) {let timer;return function () {let ctx thislet args argumentsif (timer) {clearTimeout(timer)}timer setTimeout(() > {timer nullfun…

报错 npm ERR! 404 Not Found - GET https://registry.npmjs.com/ - Not found

需要切换淘宝镜像 npm config set registry https://registry.npm.taobao.org

curl不通 k8s_curl 访问k8s api

下载jqchmod x jqmv jq /usr/bin/启用非安全端口kubectl proxy --port8080查看默认namespace pod列表curl localhost:8080/api/v1/namespaces/default/pods/ | jq -r .items[].metadata.nameHTTPS访问创建一个namespacekubectl create ns test创建rolekubectl create role pods…

草图大师怎么取消组件关联_sketchup取消隐藏(草图大师里取消全部隐藏快捷键)...

为什么SU中隐藏的组件&#xff0c;右键后怎么没有取消隐藏&#xff1f;...在sketchup菜单“窗口”里&#xff0c;有一个叫“资源目录”的窗口&#xff0c;里面可以看见模型里所有组件的嵌套关系&#xff0c;隐藏的组件以浅色显示你定义了组件&#xff0c;如果对其组件进行单独编…

vue 一键复制粘贴文字功能

1/下载 clipboard 依赖 npm install clipboard --save2/在功能页面写如下代码 <template><div style"margin:10px auto;" v-for"(item,index) in ringTemplete" :key"index" class"article" ><el-card class"bo…

hyper运算符_来自Intel的高性能的正则表达式匹配库——Hyperscan

作者简介&#xff1a;王翔&#xff0c;英特尔软件工程师&#xff0c;负责Hyperscan研发。主要研究领域包括正则表达式匹配&#xff0c;深度报文检测等。感谢英特尔工程师张磊的建议和修改。阅读字数&#xff1a;2969 | 5分钟阅读摘要Hyperscan是一款来自于Intel的高性能的正则表…

jsp 新建页面的方法

jsp 新建页面需要更改java代码,示例如下 新建一个cs.jsp 使用jsp ${ctx} 获取当前根目录或是用相对路径都是跳不过去的 <a href"${ctx}/cs">测试</a>这时要找到你项目中的 Controler层 在相应java页下配置如下代码就可以了 RequestMapping(value &q…