sooka_consult_uniapp/pages/demo/sannong/sannong.vue

<template>
    <!-- pages/me.wxml -->
    <view class="container">
        <tabs :list="tabs" tab-class="tab-class" :showBadge="true" :swiper="true" activeColor="#07c160" normalColor="#000000" @change="tabChange">
            <tab-page :slot="item.name" v-for="(item, index) in tabs" :key="index">
                <!-- <view style="height: 100%;background-color: {{colors[index]}};">{{index}}</view> -->

                <view v-if="index == 0" class="container">
                    <view class="rnwdList">
                        <view class="list" @tap="goDetails" v-for="(item, index1) in qbwd" :key="index1">
                            <span class="listTitle">{{ item.title }}</span>
                            <view class="onePic" v-if="item.imgList.length == 1">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>
                            <view class="twoPic" v-if="item.imgList.length == 2">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="threePic" v-if="item.imgList.length == 3">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="jlSj">
                                <span class="jf">
                                    {{ item.jf }}
                                    <em class="iconfont icon-jifen"></em>
                                </span>
                                <view class="ck">
                                    <span>
                                        <em class="iconfont icon-pinglun"></em>
                                        {{ item.pl }}
                                    </span>
                                    <span>
                                        <em class="iconfont icon-chakan"></em>
                                        {{ item.ck }}
                                    </span>
                                    <span>
                                        <em class="iconfont icon-shoucang"></em>
                                        {{ item.dz }}
                                    </span>
                                </view>
                            </view>

						</view>
                    </view>
                </view>

                <view v-if="index == 1" class="container">
                    <view class="rnwdList">
                        <view class="list" @tap="goDetails" v-for="(item, index1) in jcwd" :key="index1">
                            <span class="listTitle">{{ item.title }}</span>

                            <view class="onePic" v-if="item.imgList.length == 1">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="twoPic" v-if="item.imgList.length == 2">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="threePic" v-if="item.imgList.length == 3">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="jlSj">
                                <span class="jf">
                                    {{ item.jf }}
                                    <em class="iconfont icon-jifen"></em>
                                </span>
                                <view class="ck">
                                    <span>
                                        <em class="iconfont icon-pinglun"></em>
                                        {{ item.pl }}
                                    </span>
                                    <span>
                                        <em class="iconfont icon-chakan"></em>
                                        {{ item.ck }}
                                    </span>
                                    <span>
                                        <em class="iconfont icon-shoucang"></em>
                                        {{ item.dz }}
                                    </span>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view v-if="index == 2" class="container">
                    <view class="rnwdList">
                        <view class="list" @tap="goDetails" v-for="(item, index1) in zdxs" :key="index1">
                            <span class="listTitle">{{ item.title }}</span>

                            <view class="onePic" v-if="item.imgList.length == 1">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="twoPic" v-if="item.imgList.length == 2">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="threePic" v-if="item.imgList.length == 3">
                                <image :src="loadImgSrc(item.url)" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="jlSj">
                                <span class="jf">
                                    {{ item.jf }}
                                    <em class="iconfont icon-jifen"></em>
                                </span>
                                <view class="ck">
                                    <span>
                                        <em class="iconfont icon-pinglun"></em>
                                        {{ item.pl }}
                                    </span>
                                    <span>
                                        <em class="iconfont icon-chakan"></em>
                                        {{ item.ck }}
                                    </span>
                                    <span>
                                        <em class="iconfont icon-shoucang"></em>
                                        {{ item.dz }}
                                    </span>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

			</tab-page>
        </tabs>
    </view>
</template>

<script>
import tabs from '../../../components/tabs/tabs.vue';
import tabPage from '../../../components/tab-page/tab-page.vue';
// pages/me.js
var localData = require('../../../data/json');
const app = getApp();
export default {
    components: {
        tabs,
        tabPage
    },
    data() {
        return {
            currentIndex: 0,
            //默认是活动项
            qbwd: '',
            jcwd: '',
            zdxs: '',
            tabs: [
                {
                    name: '全部问答'
                },
                {
                    name: '精彩问答'
                },
                {
                    name: '最多悬赏'
                }
            ]
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
            this.qbwd=localData.qnwdList,
            this.jcwd= localData.jcwdList,
            this.zdxs= localData.zdxsList
    },
    methods: {
        // // 切换swiper-item触发bindchange事件
        // pagechange: function (e) {
        //   // 通过touch判断，改变tab的下标值
        //   if ("touch" === e.detail.source) {
        //     let currentPageIndex = this.data.currentIndex;
        //     currentPageIndex = (currentPageIndex + 1) % 2;
        //     // 拿到当前索引并动态改变
        //     this.setData({
        //       currentIndex: currentPageIndex,
        //     })
        //   }
        // },

        // //点击tab时触发
        // titleClick: function (e) {
        //   this.setData({
        //     //拿到当前索引并动态改变
        //     currentIndex: e.currentTarget.dataset.idx
        //   })
        // },
        tabChange: function (e) {},

        goDetails() {
            uni.navigateTo({
                url: '/pages/demo/wenbaxiangqing/wenbaxiangqing'
            });
        }
    }
};
</script>
<style>
@import 'sannong.css';
</style>