32个uniapp项目源码 涵盖商城团购等

资源内容介绍

源码列表：IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zipmpvue 仿网易严选mpvue-shop-master.zipmpvue-音乐播放器mpvue-music-master.zipmpvue性能测试与体验miniweibo-master.zipmpvue改造的日历.zipmpvue框架仿滴滴出行didi-master.zipmpVue高仿美团小程序教程mpvue-meituan-master.zipuni APP自动更新并安装.vueuni-app nvue沉浸式状态栏(线性渐变色).vueuni-app 二维码生成器分享wxqrcode.zipuni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zipuni-app 自定义底部导航栏uni-app-bottom-navigation-master.zipuni-app全局变量的几种实现方式.zipuni-app的markdown富文本编辑器插件uniapp-

<template> <view class="body"> <view class="tabbar" ><view class="tabbarlist" > <view class="tab"><text>推荐</text></view><view class="tab"><text>财经</text></view><view class="tab"><text>科技</text></view><view class="tab"><text>娱乐</text></view> </view> </view><!-- 数据是第三方的，如果自己的数据最好加一个type，通过type来分类排版，以下我是通过作者判断实现的 更多源码请加群 UniApp开源技术群 757988036 --><view class="uni-list"><view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key" @click="goDetail(value)" ><view class="uni-media-list"><image :class="[(value.author_name)=='36氪的朋友们' ? 'uni-media-list-logo':'listhide']" :src="value.cover"></image><view class="uni-media-list-body"><view class="uni-media-list-text-top">{{value.title}}</view><view class="uni-media-list-text-bottom"><text :class="[(value.author_name)=='全媒派' ? 'listhide':'']">{{value.author_name}}</text><text :class="[(value.author_name)=='36氪的朋友们' ? '':'listhide']" >{{value.published_at}}</text><image :class="[(value.author_name)=='全媒派' ? 'list3':'listhide']" :src="value.cover"></image><image :class="[(value.author_name)=='全媒派' ? 'list3':'listhide']" :src="value.cover"></image><image :class="[(value.author_name)=='全媒派' ? 'list3':'listhide']" :src="value.cover"></image></view></view><image :class="[(value.author_name)!=='36氪的朋友们' && (value.author_name)!=='全媒派' ? 'uni-media-list-logo':'listhide']" :src="value.cover"></image></view></view></view> </view></template><script>var dateUtils = require('../../../common/util.js').dateUtils; export default {data() {return { listData: [],last_id: "",reload: false}},onLoad() { this.getList();},onPullDownRefresh() {this.reload = true;this.last_id = ""; this.getList();},onReachBottom() {this.getList();},methods: { getList() {var data = {column: "id,post_id,title,author_name,cover,published_at" //需要的字段名};if (this.last_id) { //说明已有数据，目前处于上拉加载data.minId = this.last_id;data.time = new Date().getTime() + "";data.pageSize = 10;}uni.request({url: 'https://unidemo.dcloud.net.cn/api/news',data: data,success: (data) => {if (data.statusCode == 200) {let list = this.setTime(data.data);this.listData = this.reload ? list : this.listData.concat(list);this.last_id = list[list.length - 1].id;this.reload = false;}},fail: (data, code) => {console.log('fail' + JSON.stringify(data));}})},goDetail: function (e) {// if (!/前|刚刚/.test(e.published_at)) {// e.published_at = dateUtils.format(e.published_at);// }let detail = {author_name: e.author_name,cover: e.cover,id: e.id,post_id: e.post_id,published_at: e.published_at,title: e.title}uni.navigateTo({url: "../list2detail-detail/list2detail-detail?detailDate=" + encodeURIComponent(JSON.stringify(detail))})},setTime: function (items) {var newItems = [];items.forEach((e) => {newItems.push({author_name: e.author_name,cover: e.cover,id: e.id,post_id: e.post_id,published_at: dateUtils.format(e.published_at),title: e.title});});return newItems;}},}</script></script><style>.tabbar{width: 100%;height: 100upx; }.tabbarlist{width: 100%;height: 100upx;position: fixed;background:#ffffff; z-index: 999999;border-bottom: solid #eee 1upx; }.tabbarlist .tab{width: 20%;height: 100upx;float: left;display: block;text-align: center;line-height: 100upx;color: #000;}.listhide{display: none;}.listshow{display: block;}.list3{height: 140upx;margin-left: 4upx;}.uni-media-list-logo {width: 180upx;height: 140upx; }.uni-media-list-body {height: auto;justify-content: space-around;}.uni-media-list-text-top {height: 74upx;font-size: 28upx;overflow: hidden;}.uni-media-list-text-bottom {display: flex;flex-direction: row;justify-content: space-between;}</style>演示地址：http://wx1.sinaimg.cn/mw690/0060lm7Tly1fyapsl1l03j30k00qojtn.jpg