1. 程式人生 > 實用技巧 >uni-app 迴圈列表項跳轉指定外鏈解決方案<web-view>標籤

uni-app 迴圈列表項跳轉指定外鏈解決方案<web-view>標籤

news.vue

<view class="list">
            <view class="uni-padding-wrap backWhite wauto80" v-for="(item,index) in infoList" :key="index">
                <view class="uni-flex info_item" @tap="openUrl(index)">
                    <view class="info">
                        <view class
="title"> <span class="tag">{{item.label}}</span> <text>{{ item.title }}</text> </view> <view class="des"> <text class="newsdata"
>{{ item.create_time }}</text> <image class="w23" src="https://test134.vrapp.chot.cn/mini/picture/news_eye.png"></image> <text class="newsdata">{{ item.number }}</text> </view> </view> <view class
="imgRignt"> <image class="newsImg" :src="item.thumb"></image> </view> </view> </view> <uni-load-more :status="status" :content-text="contentText" /> </view>
methods: {
// 傳遞new_id給要顯示內容的頁面 openUrl(index) { uni.navigateTo({ url:
"../../pages/newDetail/newDetail?news_id=" + this.infoList[index].id }) }
}

newsDetail.vue

<template>
    <view>
        <web-view :src='src'> </web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                src: "",
                news_id: ""
            }
        },
        onLoad: async function(option) {
            this.news_id = option.news_id;
            const res = await this.$myRequset({
                url: "/api",
                method: "POST",
                data: {
                    operate: "News.get_link",
                    news_id: this.news_id
                },
                header: {
                    'content-type': 'application/form'
                }
            });
            this.src = res.data.data.link;
        }
    }
</script>

<style>
</style>