<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. Filter详解(转)

    以前以为Filter只是一个特殊点的Servlet,用进只需在web.xml中配置一下拦截路径就可以了,可经过这两天的深入学习,才知道以前对Filter类的了解和使用都太过浅薄了. 在网上看了很多篇相 ...

  2. 转搞定python多线程和多进程

    转自https://www.cnblogs.com/whatisfantasy/p/6440585.html 1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的最小 ...

  3. 【Pyqt5】自定义信号简单原理(易懂版),多窗口交互,传输数据,调用方法

    PS:如果你想在2窗口调用1窗口的内部方法,或者在2窗口传递数据给1窗口数据,本片博客可以放心食用 主窗口: class MainWindow(QWidget,Ui_MainFrom): insert ...

  4. 深入探索WebSockets

    WebSockets简介 在2008年中期,开发人员Michael Carter和Ian Hickson特别敏锐地感受到Comet在实施任何真正强大的东西时所带来的痛苦和局限. 通过在IRC和W3C邮 ...

  5. python mooc 3维可视化<第一周第一单元>

    基本含义 数据->图像 分类 重点关注空间数据的可视化 方法 二维标量数据场 三维标量数据场 二位标量数据场 颜色映射法 等值线法 立体图法 层次分割法 三维标量数据场 面绘制法 体绘制法 展示 ...

  6. 2019-8-31-C#-对-byte-数组进行模式搜索

    title author date CreateTime categories C# 对 byte 数组进行模式搜索 lindexi 2019-08-31 16:55:58 +0800 2018-07 ...

  7. Leetcode888.Fair Candy Swap公平的糖果交换

    爱丽丝和鲍勃有不同大小的糖果棒:A[i] 是爱丽丝拥有的第 i 块糖的大小,B[j] 是鲍勃拥有的第 j 块糖的大小. 因为他们是朋友,所以他们想交换一个糖果棒,这样交换后,他们都有相同的糖果总量.( ...

  8. QT窗口无边框最前

    this->setWindowFlags(Qt::WindowStaysOnTopHint| Qt::CustomizeWindowHint| Qt::Tool| Qt::FramelessWi ...

  9. 微信小程序组件——bindtap和catchtap的区别

    了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...

  10. 最短路-Dijkstra算法整理

    维基说的很全面:https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm 理解: 先设置访问数组vis[]和距离数组dist[],开始时把源点(sour ...