uni-app学习记录04-轮播图和滑屏图片
<template>
<view>
<!-- 轮播图视图 swiper-item是每页的元素 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="1500" :duration="1000" @change="test" circular="true">
<swiper-item>
<view class="box5">
<image src="../../static/shuijiao.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view class="box5">
<image src="../../static/shuijiao.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view class="box5">
<image src="../../static/shuijiao.jpg" mode=""></image>
</view>
</swiper-item>
</swiper>
<!-- 横向画图 :scroll-x开启x轴发滚动 white-space: nowrap不换行去显示 -->
<scroll-view :scroll-x="true" style="white-space: nowrap;">
<view class="box1">A</view>
<view class="box2">B</view>
<view class="box3">C</view>
</scroll-view>
<view class="id">
<view class="left">
<view v-for="(item,index) in list" :key="index" @click="qiehuan(index)">
{{item.title}}
</view>
</view>
<view class="rigth">
<!-- :scroll-into-view可以设置让子菜单滚动 -->
<scroll-view :scroll-y="true" class="box4" style="height: 200px;" :scroll-into-view="aid">
<view v-for="(item,index) in list" :key="index" :id="'po'+ index" >
{{item.title}}
<view v-for="(it,idx) in item.list" :key="idx">
{{it}}
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template> <script>
export default {
data() {
return {
list:[
{title:"华为",list:["华为1","华为2","华为3","华为4","华为5","华为6","华为7"]},
{title:"小米",list:["小米1","小米2","小米3","小米4","小米5","小米6","小米7"]},
{title:"苹果",list:["苹果1","苹果2","苹果3","苹果4","苹果5","苹果6","苹果7"]},
{title:"魅族",list:["魅族1","魅族2","魅族3","魅族4","魅族5","魅族6","魅族7"]},
{title:"三星",list:["三星1","三星2","三星3","三星4","三星5","三星6","三星7"]}
],
aid:""
}
},
methods: {
test(e) {
// console.log(e.detail.current)
},
qiehuan(index){
this.aid = 'po'+index
console.log('po'+index)
}
}
}
</script> <style lang="scss">
swiper{
height: 240px;
}
.box1 {
display: inline-block;
width: 200px;
height: 100px;
background: #007AFF;
border: 1px solid red;
} .box2 {
display: inline-block;
width: 200px;
height: 100px;
background: #f0f0f0;
border: 1px solid red;
} .box3 {
display: inline-block;
width: 200px;
height: 100px;
background: #00ff00;
border: 1px solid red;
}
.box5{
text-align: center;
width:100%;
height:100%;
}
.box4 {
white-space: nowrap;
}
.id{
display: flex;
.left{
width:100px;
border:1px solid red;
}
.rigth{
flex: 1;
}
} </style>
uni-app学习记录04-轮播图和滑屏图片的更多相关文章
- Bootstrap 我的学习记录4 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- BootStrap学习(7)_轮播图
一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...
- JQ 实现轮播图(3D旋转图片轮播效果)
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了
今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...
- webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画
超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...
- 初识 swift 封装轮播图
一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...
- OC可点击的两种轮播图效果
基本上,每一个APP都有一个轮播图的效果展示,一般都是用来展示图片的一些信息,然后可以点击查看或购买,所以在此我将这种轮播图进行了一个类的封装,效果包含两种形式:第一种,来回轮转样式,第二种,一个方向 ...
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
随机推荐
- 光(mirror room)
/* 光线只有遇上边界或堵塞的格子才会改变方向,所以改变方向的位置是有限的,光线的方向又最多只有四种,所以光线在循环之前改变方向的次数是O(n+m+k)级别的.我们可以模拟光线的移动.已知光线位置和光 ...
- linux开发脚本自动部署及监控
linux开发脚本自动部署及监控 开发脚本自动部署及监控一.编写脚本自动部署反向代理.web.nfs:要求:1.部署nginx反向代理三个web服务,调度算法使用加权轮询: #!/bin/sh ngx ...
- pytest相关资源收集
pytest官网 https://docs.pytest.org/en/latest/getting-started.html 官网推荐的plugin https://docs.pytest.org/ ...
- SpringMvc表单标签库
HTML密码框 <td><form:label path="password">密码:</form:label></td><t ...
- 【JZOJ4895】【NOIP2016提高A组集训第16场11.15】三部曲
=v= 因为外来的入侵,国王决定在某些城市加派士兵.所有城市初始士兵数量为0.当城市 被加派了k名士兵时.城市i的所有子城市需要被加派k+1名士兵.这些子城市的所有子城市需要被加派k+2名士兵.以此类 ...
- Spring Boot 学习填的坑一
1.关于springBoot自动扫描规则: SpringBoot项目的Bean装配默认规则是根据Application类所在的包位置从上往下扫描! "Application"类是指 ...
- nodeJs学习-17 博客案例
源码:智能社视频20节课件 const express=require('express'); const static=require('express-static'); const cookie ...
- 纯CSS3实现Metro Icon
在线演示 本地下载
- JS文字球状放大效果
在线演示 本地下载
- 【水滴石穿】AB-B-Clone
地址: 源码 运行效果 无别的效果,代码如下 //index.js /** * @format * @lint-ignore-every XPLATJSCOPYRIGHT1 */ import {Ap ...