我在另一个div(#video-wrapper)中有两个div .
HTML:
<div class="row">
<div class="video-wrapper col-lg-2">
<div class="video-thumbnail">
<img src="img/img.jpg">
<span class="glyphicon glyphicon-play video-play"></span>
<span class="glyphicon glyphicon-info-sign video-info"></span>
</div>
<div class="video-description">
<p class="title">See and Sea...</p>
<div class="video-upload-info">
<p class="by">Franschisil</p>
<p class="pubdate">4 days ago</p>
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.video-wrapper {
}
.video-thumbnail {
position: relative;
height: 110px;
box-shadow: 0px 0px 10px 0px;
}
.video-description {
height: 100px;
background-color: white;
padding: 5px;
word-wrap: break-word;
opacity: 0.9;
}
Run Code Online (Sandbox Code Playgroud)
现在它看起来像这样:

我想要实现的是隐藏#video-description,并将其显示#video-thumbnail在.video-info单击时.我该如何实现这一目标?非常感谢您的帮助和指导.谢谢.
更新
这是我在点击信息之前想要它的样子: …
这是我使用 react navigation v3.2.1 的导航堆栈:
我有一个切换导航器可以切换到身份验证导航堆栈和经过身份验证的应用程序堆栈。
应用程序堆栈是使用底部选项卡导航器制作的。
我想为选项卡导航器使用自定义组件。
使用createBottomTabNavigator自定义tabBarComponent.
例如:
应用容器.js
const switchStack = createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack
}, {
initialRouteName: 'AuthLoading',
})
export default createAppContainer(switchStack)
Run Code Online (Sandbox Code Playgroud)
AppStack.js
const AppStack = createBottomTabNavigator({
Home: {
screen: HomeStack,
},
Chat: {
screen: ChatStack
},
}, {
initialRouteName: 'Home',
activeColor: '#f0edf6',
inactiveColor: '#3e2465',
shifting: false,
barStyle: {
backgroundColor: '#694fad',
},
labeled: false,
tabBarComponent: ({navigation}) => <BottomBar navigation={navigation}/>
})
export …Run Code Online (Sandbox Code Playgroud) 我没有TEMPLATE_CONTEXT_PROCESSORS 在我的默认设置!
TEMPLATE_CONTEXT_PROCESSORS = (
'django.contrib.auth.context_processors.auth',
'django.core.context_processors.debug',
'django.core.context_processors.i18n',
'django.core.context_processors.request',
'django.core.context_processors.static',
'django.contrib.messages.context_processors.messages',
)
Run Code Online (Sandbox Code Playgroud)
我必须自己添加它我该怎么办?请给我你的建议或意见.谢谢!
请多多包涵.我只是在学习django-rest-framework.我真的无法抓住它.
模型:
class Day(models.Model):
date = models.DateField(default=date.today)
class ToDo(models.Model):
date = models.ForeignKey(Day)
name = models.CharField(max_length=100)
very_important = models.BooleanField(default=False)
finished = models.BooleanField(default=False)
Run Code Online (Sandbox Code Playgroud)
正常观点:
def home(request):
days = Day.objects.all()
return render(request, 'test.html', {
'days':days
})
Run Code Online (Sandbox Code Playgroud)
创建了一个serializers.py文件:
class DaySerializer(serializers.ModelSerializer):
class Meta:
model = Day
field = ('id', 'date')
class ToDoSerializer(serializers.ModelSerializer):
date = DaySerializer()
class Meta:
model = ToDo
field = ('id', 'date', 'name', 'very_important', 'finished')
Run Code Online (Sandbox Code Playgroud)
在此之后,我迷失了.假设我去了url('^api/$'),如何获取Day及其相关对象的json对象?
基本上这就是我想要显示的方式:

现在我如何使用django-rest-framework看起来像模板中的上述内容.
更新
我想做这样的事情:
通过转到url获取json对象(例如:/api/.json)
[
{
"id": 1,
"date": "2015-06-23",
"day_todo_set": [ …Run Code Online (Sandbox Code Playgroud)我将 aws s3 用于我的 django 应用程序的静态和媒体文件。Gunicorn 和 Nginx 被用于应用程序和代理服务器。
Nginx 设置:
server {
listen 80;
server_name sitename.com;
location / {
include proxy_params;
proxy_pass http://unix:/home/SiteNameDjango/myproject/myproject.sock;
}
}
Run Code Online (Sandbox Code Playgroud)
由于我将 aws s3 用于我的静态和媒体文件,我应该如何为我的静态位置配置 Nginx?或者不需要配置静态和媒体文件?
如果有帮助,这里是 aws s3 的 Django 项目设置:
STATICFILES_LOCATION = 'static'
MEDIAFILES_LOCATION = 'media'
STATICFILES_STORAGE = 'myproject.custom_storages.StaticStorage'
DEFAULT_FILE_STORAGE = 'myproject.custom_storages.MediaStorage'
AWS_STORAGE_BUCKET_NAME = "django-bucket"
AWS_S3_CUSTOM_DOMAIN = AWS_STORAGE_BUCKET_NAME + ".s3.amazonaws.com"
STATIC_URL = "https://" + AWS_STORAGE_BUCKET_NAME + ".s3.amazonaws.com/"
MEDIA_URL = STATIC_URL + "media/"
ADMIN_MEDIA_PREFIX = STATIC_URL + "admin/"
Run Code Online (Sandbox Code Playgroud)
例如网址:
https://django-bucket.s3.amazonaws.com/media/user_image/1497598249_49.jpeg
Run Code Online (Sandbox Code Playgroud) 我的css放在静态目录中.
HTML:
<html>
<head>
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我有嵌套路线
const routes = [
{
path: '/user/:id', component: Profile,
children: [
{
path: 'feeds',
component: ProfileFeeds
},
{
path: 'photos',
component: ProfilePhotos
},
]
},
... some other routes... ,
];
Run Code Online (Sandbox Code Playgroud)
当我在嵌套路由之外时,找到静态文件.但是,当我导航到时user/user_21/feeds,Vue无法找到css.
工作css:
http://localhost:8080/static/font-awesome/css/font-awesome.min.css
Run Code Online (Sandbox Code Playgroud)
变成错误的静态路径:
http://localhost:8080/user/static/font-awesome/css/font-awesome.min.css
Run Code Online (Sandbox Code Playgroud)
我怎么解决这个问题?
假设这是我的模板:
<template>
<div id="Test">
<transition name="fade">
<div class="row" id="RowOne">
<p>Lorem ipsum dolor odit qui sit?</p>
</div>
</transition>
<transition name="fade">
<div class="row" id="RowTwo">
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</transition>
<transition name="fade">
<div class="row" id="RowThree">
<p>Lorem ipsum dolor sit amet, tenetur!</p>
</div>
</transition>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
我想RowOne, RowTwo and RowThree分别在视口中显示它时显示和动画.与Laracasts网站一样,当滚动位置到达元素偏移时,元素会显示并生成动画.是否可以使用Vue.js和javascript?
我想做一个动画标题。
onScroll函数更新动画值。动画效果很好,但动画一点也不流畅。
我看到了使用如何scrollEventThrottle帮助平滑度的问题。所以我认为使用 FlatList 会很顺利,但事实并非如此。如果您在按下时滚动,则很流畅。但是如果你滚动并离开手指,它会很紧张(我不知道如何描述它。抱歉)。滚动很流畅,但动画视图(标题)动画一点也不流畅。
环境
目标平台: iOS 和 Android
构建工具: expo
export default class AnimatedHeader extends React.Component {
state = {
animatedValue: new Animated.Value(0),
};
_renderItem = ({item}) => {
return (
<View style={styles.nonsenseItem}>
<Text style={styles.itemText}>{item}</Text>
</View>
)
};
render() {
let scaleY = this.state.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [1, 0.5],
extrapolate: 'clamp',
});
let translateY …Run Code Online (Sandbox Code Playgroud)我想在horizontalFlatList的渲染项上使用屏幕的宽度。但是,它没有按预期工作。当horizontal为假时,百分比值有效。但是当horizontal为真时,百分比值不起作用。
class App extends React.Component {
_renderItem = ({ item }) => {
return (
<View
style={{
width: '100%',
height: 100,
}}>
<Text>{item.key}</Text>
</View>
);
};
render() {
return (
<View style={styles.container}>
<FlatList
data={[{ key: 1 }, { key: 2 }, { key: 3 }]}
renderItem={this._renderItem}
horizontal={true}
/>
</View>
);
}
}
Run Code Online (Sandbox Code Playgroud)
我在 react-native 和 expo 中开发了一个 android 应用程序。我还在 google play 上发布了该应用程序。
现在,我在本地对我的 SQLite 数据库表进行了一些修改。
假设,在表的架构之前是这样的:
CREATE TABLE expenditures (id integer primary key, max_amount REAL not null);
Run Code Online (Sandbox Code Playgroud)
现在我想把它改成这样:
CREATE TABLE expenditures (id integer primary key, max_amount TEXT not null);
Run Code Online (Sandbox Code Playgroud)
在生产应用程序(谷歌游戏商店)上进行新的更新/升级后,有什么方法可以运行方法吗?这样升级后我只能更改一次表,其他新安装的用户不会受到此功能的影响。我在原生android上找到了两种方法:
但是由于我使用 react-native 和 expo 开发了我的应用程序,所以我不能使用上述方法。虽然我onUpgrade 在 expo 代码中找到了,但我不确定如何在 expo 中使用此功能。
或者有没有更好的方法来处理在 react-native 和 expo 中发布的应用程序上的数据库迁移?
react-native ×4
django ×3
expo ×2
vue.js ×2
vuejs2 ×2
amazon-s3 ×1
android ×1
css ×1
django-1.6 ×1
html ×1
javascript ×1
jquery ×1
json ×1
nginx ×1
reactjs ×1
sqlite ×1
vue-router ×1