sooka_consult_uniapp/pages/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="host + item.url" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>
							{{host + item}}
                            <view class="twoPic" v-if="item.imgList.length == 2">
                                <image :src="host + item.url" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

                            <view class="threePic" v-if="item.imgList.length == 3">
                                <image :src="host + 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="host + item.url" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

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

                            <view class="threePic" v-if="item.imgList.length == 3">
                                <image :src="host + 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="host + item.url" v-for="(item, index2) in item.imgList" :key="index2"></image>
                            </view>

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

                            <view class="threePic" v-if="item.imgList.length == 3">
                                <image :src="host + 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';
import tabPage from '../../components/tab-page/tab-page';
// pages/me.js
var localData = require('../../data/json');
const app = getApp();
export default {
    components: {
        tabs,
        tabPage
    },
    data() {
        return {
            host: app.globalData.host,
            currentIndex: 0,
            //默认是活动项
            qbwd: '',
            jcwd: '',
            zdxs: '',
            tabs: [
                {
                    name: '全部问答'
                },
                {
                    name: '精彩问答'
                },
                {
                    name: '最多悬赏'
                }
            ]
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            qbwd: localData.qnwdList,
            jcwd: localData.jcwdList,
            zdxs: localData.zdxsList
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    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: '../wenbaxiangqing/wenbaxiangqing'
            });
        }
    }
};
</script>
<style>
@import './sannong.css';
</style>