react-image-gallery
我一直在尝试从这个 npm 包中实现。
虽然我可以获得一些滑动图像来工作,但每当我快速单击下一个箭头按钮时,它就会以类似越野车的行为弹出到屏幕顶部:
我尝试减少 CSS 文件中的过渡时间,但还是发生了同样的问题。我做错了什么以及如何让这个轮播像示例中那样实现一致的平滑过渡?
我安装了该软件包,然后按照建议将其包含在内:
import ImageGallery from 'react-image-gallery';
import React from 'react'
import '../node_modules/react-image-gallery/styles/css/image-gallery.css';
class App extends React.Component {
render() {
const images = [
{
original: 'http://lorempixel.com/1000/600/nature/1/',
thumbnail: 'http://lorempixel.com/250/150/nature/1/',
},
{
original: 'http://lorempixel.com/1000/600/nature/2/',
thumbnail: 'http://lorempixel.com/250/150/nature/2/'
},
{
original: 'http://lorempixel.com/1000/600/nature/3/',
thumbnail: 'http://lorempixel.com/250/150/nature/3/'
}
]
return (
<ImageGallery items={images} />
);
}
}
export default App;
Run Code Online (Sandbox Code Playgroud) 我有一个从多个内部连接在一起的表的查询查询。我需要在嵌套include
模型上对它们进行分组,但是即使我将属性提到为,sequelize查询每次也会抛出主键attributes:[]
。
但是attributes:[]
适用于嵌套include
模型。
实际上,在调用 API 时,我在 React 中遇到了一个小问题,因为ComponentWillMount
已弃用。
我这样做了:
class MyClass extends Component {
constructor() {
super();
this.state = {
questionsAnswers: [[{ answers: [{ text: '', id: 0 }], title: '', id: 0 }]],
},
};
}
componentDidMount() {
this.getQuestions();
}
getQuestions = async () => {
let questionsAnswers = await Subscription.getQuestionsAndAnswers();
questionsAnswers = questionsAnswers.data;
this.setState({ questionsAnswers });
};
Run Code Online (Sandbox Code Playgroud)
因此,页面第一次渲染时没有questionsAsnwers
,当我得到页面时,questionAnswers
页面被重新渲染
有没有更好的解决方案来避免重新渲染?
我正在使用Chart.js作为折线图,我的传说如下.
问题是图例只有轮廓颜色,我希望图例框中的整个颜色都是彩色的.我没有在文档中找到任何东西,看看为什么我的只有边框.我有点不知所措,这是我的设置示例:
var LinuxDistributionsCombined = document.getElementById('LinuxDistributionsCombined');
var myChart = new Chart.Line(LinuxDistributionsCombined, {
type: 'line',
data: {
labels: ['Jul-2016', 'Sep-2016', 'Oct-2016', 'Dec-2016', 'Jan-2017', 'Feb-2017', 'Mar-2017', 'Apr-2017', 'May-2017', 'Jun-2017', 'Jul-2017', 'Aug-2017', 'Sep-2017', 'Oct-2017'],
datasets: [{
label: 'Ubuntu-based',
fill: true,
data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
borderColor: '#a6cee3',
borderWidth: 1
}, {
label: 'Arch-based',
fill: true,
data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
borderColor: …
Run Code Online (Sandbox Code Playgroud) 我正在尝试根据传递给参数的URL参数从firestore集合中获取特定文档,但是当我使用初始化集合时expensesCollection: AngularFirestoreCollection<Expense>
,where
查询返回以下错误:
TS2339:类型'AngularFirestoreCollection上不存在属性'where'
单击"ExpensesList"组件上的数据表行后,将访问"ViewExpense"组件,该组件将费用ID作为参数传递,该参数在where查询中使用.
-
费用-list.component.html:
<mat-row *matRowDef="let row; columns: tableColumns" routerLink="/expenses/view/{{row.expenseId}}"></mat-row>
Run Code Online (Sandbox Code Playgroud)
-
视图expense.component.ts:
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Expense } from '../expenseModel';
@Component({
selector: 'app-view-expense',
templateUrl: './view-expense.component.html',
styleUrls: ['./view-expense.component.scss']
})
export class ViewExpenseComponent implements OnInit {
expenseId: any;
expensesCollection: AngularFirestoreCollection<Expense>;
expenses: Observable<Expense[]>;
expense: Observable<Expense>;
constructor(private …
Run Code Online (Sandbox Code Playgroud) javascript firebase firebase-realtime-database angular google-cloud-firestore
我需要向 Google Play Protect 发送一些信息,因为虽然我的应用程序在 Google Play 商店中运行良好,但对于从三星 App Store 下载它的人来说却出现了错误。
问题之一是下载我的 APK 的 URL。我只将生成的已签名 APK 上传到应用商店。我从未使用过 URL,所以我如何为我的应用程序获取该 URL,以便我可以为 Google Play Protect 团队填写这个问题。
截屏:
如何从猫头鹰轮播库中删除项目?
这是我的 html 标记:
<div class="owl-carousel owl-theme">
<img src="/assets/storage/gallery/1.jpg"></div>
<img src="/assets/storage/gallery/2.jpg"></div>
<img src="/assets/storage/gallery/3.jpg"></div>
<img src="/assets/storage/gallery/4.jpg"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我的 JavaScript:
$(".owl-carousel").owlCarousel({
items: 1,
margin: 10,
rtl: true,
autoHeight: true,
lazyLoad: true
});
Run Code Online (Sandbox Code Playgroud) 我正在使用 Reactstrap,为了使某个卡片响应窗口的大小,我想用百分比而不是像素来修复它的纵横比。
出于某种原因,这适用于宽度但不适用于高度。 https://codepen.io/anon/pen/xpwOGL
第一行是问题。如果我将高度设置为一个常数,比如说height:"200px"
,它会200px
很好。如果我更改宽度 %,它将更改宽度以匹配。但出于某种原因, height % 只是没有做任何事情。
<Card style={{width:"80%", height:"60%"}}>
<Row className="no-gutters" style={{position: "absolute"}}>
<Col xs="auto">
<button>
Next image
</button>
</Col>
<Col xs="auto">
<button>
Previous image
</button>
</Col>
</Row>
</Card>
Run Code Online (Sandbox Code Playgroud)
有没有一种不同的方式可以让我做出这种响应?
我试图让对象传播运算符与我的反应项目一起工作。它出现了一个语法错误:
我已经尝试babel-plugin-transform-object-rest-spread
按照 babel docs 的描述使用。
经过一番研究,我还尝试了babel 的GitHub 问题中描述的配置:
请参阅下面的我的.babelrc文件:
{
"presets": ["es2015"],
"plugins": ["transform-object-rest-spread"],
"sourceMaps": true,
"retainLines": true
}
Run Code Online (Sandbox Code Playgroud)
我的webpack.config文件如下:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public', 'js'),
publicPath: '/'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
options: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test:/\.scss$/,
use: …
Run Code Online (Sandbox Code Playgroud) 在我的React Native应用中,我想使用Vector Icons作为导航栏按钮。为此,我正在使用:https : //github.com/oblador/react-native-vector-icons 导航:https : //reactnavigation.org/
我也设法设置了图标,但是当我点击按钮时,背景变成黑色,我得到了不想要的效果。有没有办法在按下按钮时也能保持背景色透明?
这是我的代码:
static navigationOptions = ({ navigation }) => {
const { params } = navigation.state
return {
headerTitle: "Blog posts",
headerRight: (
<Icon.Button name="quote-right" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
<Text style={{fontSize: 15}}></Text>
</Icon.Button>
),
headerLeft: (
<Icon.Button name="navicon" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
<Text style={{fontSize: 15}}></Text>
</Icon.Button>
),
};
};
Run Code Online (Sandbox Code Playgroud)
这就是我得到的:
javascript ×5
reactjs ×4
css ×2
android ×1
angular ×1
api ×1
babeljs ×1
carousel ×1
chart.js ×1
firebase ×1
google-play ×1
html ×1
jquery ×1
mysql ×1
node.js ×1
npm ×1
owl-carousel ×1
react-native ×1
sequelize.js ×1
webpack ×1