<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-轮播图和滑屏图片的更多相关文章

  1. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  2. BootStrap学习(7)_轮播图

    一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...

  3. JQ 实现轮播图(3D旋转图片轮播效果)

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  4. 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了

    今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...

  5. webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画

    超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...

  6. 初识 swift 封装轮播图

    一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...

  7. OC可点击的两种轮播图效果

    基本上,每一个APP都有一个轮播图的效果展示,一般都是用来展示图片的一些信息,然后可以点击查看或购买,所以在此我将这种轮播图进行了一个类的封装,效果包含两种形式:第一种,来回轮转样式,第二种,一个方向 ...

  8. 带无缝滚动的轮播图(含JS运动框架)

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  9. iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

随机推荐

  1. 面试问题:Vuejs如何实现双向绑定

    最近出去面试,栽在这个问题上,提到vuejs,面试官一般会让你说vuejs的特点,一般就要回答virtual dom tree, dom tree diff, 以及数据双向绑定,然后面试官会追问你,v ...

  2. Leetcode925.Long Pressed Name长按键入

    你的朋友正在使用键盘输入他的名字 name.偶尔,在键入字符 c 时,按键可能会被长按,而字符可能被输入 1 次或多次. 你将会检查键盘输入的字符 typed.如果它对应的可能是你的朋友的名字(其中一 ...

  3. Unicode, UTF-8, GBK, ASCII的区别

    看完知乎的两篇文章大概就明白了 https://zhuanlan.zhihu.com/p/25435644 https://www.zhihu.com/question/23374078 看完总结一下 ...

  4. KDD2015,Accepted Papers

    Accepted Papers by Session Research Session RT01: Social and Graphs 1Tuesday 10:20 am–12:00 pm | Lev ...

  5. ServletConfig详解 (转载)

    ServletConfig详解  (转载)   容器初始化一个servlet时,会为这个servlet建一个唯一的ServletConfig.容器从DD读出Servlet初始化参数,并把这些参数交给S ...

  6. Java版阿里云通信短信发送API接口实例(新)

    阿里云通信(原名阿里大于)的短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信通知等. 完美支撑双11期间2亿用户,发送6亿短信 ...

  7. 使用R拟合分布

    使用R拟合分布 几个常用的概率函数介绍 这里,参考R语言实战,以及[Fitting Distribution with R]的附录. 一.认识各种分布的形态 1.1 连续型随机变量的分布 首先,我们来 ...

  8. 人生苦短,LET'S GO! GO语言目录

    1.Golang开山篇,GO就是NB! 1-1.go开发工具安装 2.go-人生第一个go程序和基本语法 3.go-流程控制 4.go-函数 5.go-流程控制 6.go-复合类型 7.go-面向对象 ...

  9. poj1087&&hdu1526 最大流

    多源多汇. 比较明显的建图.对于电器,可以从源点与各个电器相连,容量为1,表示这个电器有1个,然后对于各种接头,那可以各个接头与汇点相连,容量为1,表示每个接头只能用一次. 然后对于能够相互转换的接头 ...

  10. Java练习 SDUT-2401最大矩形面积

    最大矩形面积 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在一个矩形区域内有很多点,每个点的坐标都是整数.求一个矩形 ...