先给大家看看最终效果
首先我们来定义数据
data() {
return {
lsit: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
],
currentid: 0,
listint: [
{
id: 0,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
]
},
{
id: 1,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F3a%2F29%2F60%2F3a2960b898e721316bc92dd0fdc6754d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=3fc272f945bd648a12086a39f3ae7443',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd1%2F1707%2Fe5%2Fdd96b024ca821cb5.jpg_r_720x480x95_250d3b8f.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=a249331590ed30d260e16c75ee719618'
]
},
{
id: 2,
list: [
'https://img2.baidu.com/it/u=2639139585,4174381006&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400'
]
},
{
id: 3,
list: [
''
]
},
{
id: 4,
list: [
''
]
},
{
id: 5,
list: [
''
]
},
{
id: 6,
list: [
''
]
},
{
id: 7,
list: [
''
]
},
{
id: 8,
list: [
''
]
},
{
id: 9,
list: [
''
]
},
{
id: 10,
list: [
''
]
},
{
id: 11,
list: [
''
]
}
],
Navigation: [
{
id: 0,
name: '推荐'
},
{
id: 1,
name: '最近'
},
{
id: 2,
name: '我的文件'
},
{
id: 3,
name: '任务'
},
{
id: 4,
name: '协同组'
},
{
id: 5,
name: '内部共享'
},
{
id: 6,
name: '外部共享'
},
{
id: 7,
name: '标签导航'
},
{
id: 8,
name: '回收站'
},
{
id: 9,
name: '资料库'
},
{
id: 10,
name: '沙箱白名单'
},
{
id: 11,
name: '空间资产'
}
]
}
},
lsit 是一个字符串数组 用于储存右侧图片暂时 数据存的都是图片路径
currentid 一个数字类型 用于存当前选中的数据id
listint 用于存储 对应导航栏数据的 外键id 和对应外键的图片路径
Navigation 用于存放导航栏的数据id
然后给大家看一下css样式
page{
height: 100%;
}
.min-app{
height: 100%;
display: flex;
}
.min-app .nav{
width: 200rpx;
height: 100%;
border-right: 1px solid #eee;
}
.min-app .nav view{
display: block;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
color: #333333;
font-size: 30rpx;
border-top: 1px solid #eee;
}
.min-app .nav .current{
background-color: #b50e03;
color: #FFFFFF;
}
.dve{
flex: 1;
align-items: center;
display: flex;
flex-direction:column;
}
.dve image{
width: 90%;
height: 300rpx;
margin-top: 10px;
}
这就没什么好解释的了 如果你想改变当前选择的导航项的颜色 直接改current中的颜色就好了
再来看页面结构
<template>
<view class = "min-app">
<scroll-view class = "nav" scroll-y>
<view
v-for = "item in Navigation"
:key = "item.id"
:class="item.id == currentid?'current':''"
@click = "navSwitch(item.id)"
>
{{ item.name }}
</view>
</scroll-view>
<view class = "dve">
<image v-for = "item in lsit" :key = "item":src = "item" v-if = "lsit"></image>
</view>
</view>
</template>
min-app是整个页面的支架 然后nav用了scroll-view组件 就是一个可自由滚动的组件 要注意 scroll-y属性是关键 分别有 scroll-y 和 scroll-x
scroll-y 代表支持 上下滚动
scroll-x 支持左右滚动
然后通过Navigation 循环在scroll-view中渲染view标签 key值是每一条数据的id 在每一个view中展示对应的name 值 给每个导航项中都加入一个点击事件 用于触发navSwitch 传入当前导航项的id
dve则是页面主体图片的展示区
通过lsit循环渲染image image 的路径src则代表每一个下标 都对应着一个图片的路径
这里这个v-if是在判断当前下班是否有图片路径 如果没有则元素直接不暂时 避免报图片找不到的错误
然后我们在methods中编写这个navSwitch函数
navSwitch(id){
this.currentid = id;
let lsit = this.listint.filter((e) => e.id == id);
this.lsit = lsit[0].list
}
先接收id参数 代表当前用户选择的导航id 然后通过id在listint中找出对应id相同的那一条数据
然后将取出的对应数据的list字段赋值给lsit 用于界面的主体展示
这样我们就可以达到最开始图片中的导航效果
全部代码如下
<template>
<view class = "min-app">
<scroll-view class = "nav" scroll-y>
<view
v-for = "item in Navigation"
:key = "item.id"
:class="item.id == currentid?'current':''"
@click = "navSwitch(item.id)"
>
{{ item.name }}
</view>
</scroll-view>
<view class = "dve">
<image v-for = "item in lsit" :key = "item":src = "item" v-if = "lsit"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
lsit: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
],
currentid: 0,
listint: [
{
id: 0,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
]
},
{
id: 1,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F3a%2F29%2F60%2F3a2960b898e721316bc92dd0fdc6754d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=3fc272f945bd648a12086a39f3ae7443',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd1%2F1707%2Fe5%2Fdd96b024ca821cb5.jpg_r_720x480x95_250d3b8f.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=a249331590ed30d260e16c75ee719618'
]
},
{
id: 2,
list: [
'https://img2.baidu.com/it/u=2639139585,4174381006&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400'
]
},
{
id: 3,
list: [
''
]
},
{
id: 4,
list: [
''
]
},
{
id: 5,
list: [
''
]
},
{
id: 6,
list: [
''
]
},
{
id: 7,
list: [
''
]
},
{
id: 8,
list: [
''
]
},
{
id: 9,
list: [
''
]
},
{
id: 10,
list: [
''
]
},
{
id: 11,
list: [
''
]
}
],
Navigation: [
{
id: 0,
name: '推荐'
},
{
id: 1,
name: '最近'
},
{
id: 2,
name: '我的文件'
},
{
id: 3,
name: '任务'
},
{
id: 4,
name: '协同组'
},
{
id: 5,
name: '内部共享'
},
{
id: 6,
name: '外部共享'
},
{
id: 7,
name: '标签导航'
},
{
id: 8,
name: '回收站'
},
{
id: 9,
name: '资料库'
},
{
id: 10,
name: '沙箱白名单'
},
{
id: 11,
name: '空间资产'
}
]
}
},
onLoad() {
},
methods: {
navSwitch(id){
this.currentid = id;
let lsit = this.listint.filter((e) => e.id == id);
this.lsit = lsit[0].list
}
}
}
</script>
<style>
page{
height: 100%;
}
.min-app{
height: 100%;
display: flex;
}
.min-app .nav{
width: 200rpx;
height: 100%;
border-right: 1px solid #eee;
}
.min-app .nav view{
display: block;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
color: #333333;
font-size: 30rpx;
border-top: 1px solid #eee;
}
.min-app .nav .current{
background-color: #b50e03;
color: #FFFFFF;
}
.dve{
flex: 1;
align-items: center;
display: flex;
flex-direction:column;
}
.dve image{
width: 90%;
height: 300rpx;
margin-top: 10px;
}
</style>
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案
我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie