<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. LintCode_488 快乐数

    题目 写一个算法来判断一个数是不是"快乐数". 一个数是不是快乐是这么定义的:对于一个正整数,每一次将该数替换为他每个位置上的数字的平方和,然后重复这个过程直到这个数变为1,或是无 ...

  2. LintCode_372 在O(1)时间复杂度删除链表节点

    题目 给定一个单链表中的表头和一个等待被删除的节点(非表头或表尾).请在在O(1)时间复杂度删除该链表节点.并在删除该节点后,返回表头. 思路 因为O(1)内删除所以 不能从头节点去遍历找他的前驱节点 ...

  3. 【JZOJ3624】【SDOI2014】数数(count) AC自动机+数位dp

    题面 100 容易想到使用AC自动机来处理禁忌子串的问题: 然后在自动机上数位dp,具体是: \(f_{i,j,0/1}\)表示填了\(i\)位,当前在自动机的第\(j\)个结点上,\(0\)表示当前 ...

  4. 源码:自己用Python写的iOS项目自动打包脚本

    http://www.cocoachina.com/ios/20160307/15501.html 什么?又要测试包! 做iOS开发几年了,每天除了码代码,改Bug之外,最让我烦恼的莫过于测试的妹子跑 ...

  5. java获取外网ip地址

    转自:http://blog.163.com/houjunchang_daxue/blog/static/13037938320134543310451/ /** * 获取外网IP.归属地.操作系统 ...

  6. CSS基础学习中的几大要点心得

    CSS是前端学习中较为简单但又非常复杂的课程,说简单是因为学习它并不需要太多推理论证和逻辑思维,说它非常复杂则是更多的侧重在它的“杂”上,因为太多的格式和套路需要我们注意.以下谨列出本人在CSS学习中 ...

  7. ubuntukylin-16.04安装

    目录 安装 虚拟机安装 系统安装 vmware tools 安装 优化 1.切换软件源 2.软件源和软件更新 3.vim插件 4.安装Sublime Text 3 5.安装福昕阅读器 6.安装Anac ...

  8. 【风马一族_php】NO2_php基础知识

    原文来自:http://www.cnblogs.com/sows/p/5995763.html (博客园的)风马一族 侵犯版本,后果自负 回顾 什么是php以及php的发展史 搭建web服务器 apa ...

  9. 从程序员的角度分析微信小程序

    昨天朋友圈被微信小程序刷爆了. 我赶快在书架上拿出三年前买的书,把上面的土擦干净,压压惊. 作为一个并不是资深的程序员. 从程序员的角度分析一下微信小程序,欢迎指点. 首先吐槽 微信小程序只发了200 ...

  10. ubuntu 使用glfw.h 出现函数无法调用

    最近在学习在Ubuntu下使用qt进行opengl开发,使用到了glfw这个库.我安装官网的编译和安装方法进行了配置安装,在usr/local/include的下产生了glfw.h文件. 于是我在我的 ...