小编Ulu*_*kov的帖子

position: sticky在我的网页上添加了一些属性.在桌面浏览器上工作正常但在手机中很糟糕.

<template>\n<div>\n    <h2>{{weatherData.city}}</h2>\n    <h3>{{weatherData.weather}}</h3>\n    <rain-cloud v-if="iconSelect===\'09d\'"/>\n    <sun-cloud v-if="iconSelect===\'04d\'"/>\n    <sunshine v-if="iconSelect==\'01d\'"/>\n    <thunder-cloud v-if="iconSelect==\'11d\'"/>\n    <windy-cloud v-if="iconSelect==\'50d\'"/>\n    <snow-cloud v-if="iconSelect==\'13d\'"/>\n    <div class="container">\n        <h2>{{weatherData.temperature}}\xc2\xb0C</h2>\n        <h4>max temperature: {{weatherData.tempMax}}\xc2\xb0C</h4>\n        <h4>min temperature: {{weatherData.tempMin}}\xc2\xb0C</h4>\n        <h4>humidity: {{weatherData.humidity}}%</h4>\n    </div>\n</div>\n</template>\n\ncomputed:{\n        iconSelect(){\n            if(this.weatherData.icon==="04n" || "04d"){\n                this.weatherData.icon="04d"\n            }\n            else if(this.weatherData.icon==="01d"|| "01n"){\n                this.weatherData.icon="01d"\n            }\n            else if(this.weatherData.icon==="11d"|| "11n"){\n                this.weatherData.icon="11d"\n            }\n            else if(this.weatherData.icon==="50d"|| "50n"){\n                this.weatherData.icon="50d"\n            }\n            else if(this.weatherData.icon==="13d"|| "13n"){\n                this.weatherData.icon="13d"\n            }\n            else if(this.weatherData.icon==="09d"||"09n"||"10d"||"10n"){\n                this.weatherData.icon="09d"\n            }\n            return this.weatherData.icon\n }\n

每个组件都是 SVG 动画。当陈述为真时，我只想渲染一个。但 v-if 不支持乘法条件。有任何想法吗？每种天气都有图标代码，例如“01d”和“01n”表示白天和夜间天气晴朗。但我只能使用一个 SVG

我正在为我的投资组合使用 vue 和 vue-router。我添加了简单的“淡入淡出”动画。而且我的动画很滞后。

我的 App.vue 组件：

<template>
    <div id="app">
        <Square/>
        <Navbar/>
    </div>
</template>

我的 Square.vue 组件：

<template>
    <div id="square">
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>
<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
 </style>

我的路线文件：

import Vue from 'vue';
import Router from 'vue-router';
import Hello from './views/Hello.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'hello',
      component: Hello,
    },
    {
      path: '/i-am',
      name: 'I am',
      component: () => import( 
'./views/About.vue'),
    }, …

我正在尝试从本地主机获取数据，使用列表视图制作帖子列表并将数据传递给 CustomDetailView。这是我的 NetworkManager 代码：

我的列表视图：

和 StoryDe​​tails 视图：

那么我必须传递给 StoryDe​​tails_Preview 什么？

这是 StoryDe​​tails 代码

import SwiftUI

struct StoryDetails: View {
    var story: Story
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text("story #123456")
                    .font(.callout)
                    .foregroundColor(Color.gray)
                Spacer()
                Text("5 days ago")
                    .font(.callout)
                    .foregroundColor(Color.gray)
                Button(action:{
                    print("Hello there")
                }){
                    Image(systemName:"info.circle").resizable()
                        .frame(width:22.0, height:22.0)
                        .accentColor(Color.gray)
                }
            }
            Text(story.body)
                .foregroundColor(.black)
                .kerning(1)
                .lineLimit(nil)
            HStack {
                Button(action: {
                    print("Hello World")
                }){
                    HStack {
                        Image(systemName:"heart")
                            .accentColor(.black)
                        Text("233")
                            .foregroundColor(.black)
                    }
                    .padding(.trailing)
                    HStack {
                        Image(systemName:"bubble.left")
                            .accentColor(.black)
                        Text("45")
                            .foregroundColor(.black)
                    }
                } …