Skip to content

U
uni-app

良好的行为成为习惯 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 e645dc07 编写于 作者: hbcui1984's avatar hbcui1984
浏览文件
操作

迁移看图App模板源码 

新地址：https://github.com/dcloudio/uni-template-picture
上级 8f7e5961
隐藏空白更改
内联 并排
Showing with 1 addition and 1513 deletion
examples/image-template/App.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<script>
export default {
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
}
</script>
<style>
@import './common/common.css';
page,
view {
display: flex;
/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
}
page {
min-height: 100%;
}
page {
background-color: #EFEFEF;
}
</style>
examples/image-template/README.md
浏览文件 @ e645dc07
## UNI-APP 图片模板
使用uni-app开发的图片App模版，包含单列图、双列图，图片分类，图片轮播、预览、下载，图片分享、收藏，设置桌面背景图等功能。
<p align="center">
<img src="http://img-cdn-qiniu.dcloud.net.cn/uniapp/template/new.png" width="200"/>
<img src="http://img-cdn-qiniu.dcloud.net.cn/uniapp/template/hot.png" width="200"/>
</p>
## 运行方式
将项目拖入[HBuilderX](http://www.dcloud.io/hbuilderx.html),直接运行即可
## 使用须知
1. 页面样式主要在common/common.css
2. 数据在页面的methods->getData里获取，替换里面的链接及参数即可
3. 接口返回的字段根据已固定，若替换接口也要替换相应的字段名，页面才能正常渲染
3. 页面的分享需配置自己的appid等信息
代码已迁移，请移步[https://github.com/dcloudio/uni-template-picture](https://github.com/dcloudio/uni-template-picture)查看最新代码
examples/image-template/common/common.css 已删除 100644 → 0
浏览文件 @ 8f7e5961
@font-face {
font-family: texticons;
font-weight: normal;
font-style: normal;
src: url('https://at.alicdn.com/t/font_702773_ttt8tj203j.ttf') format('truetype');
}
.index {
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row {
flex-direction: row;
}
.column {
flex-direction: column;
}
.card {
position: relative;
width: 710upx;
margin: 20upx 20upx 20upx 20upx;
border-radius: 10upx;
overflow: hidden;
flex-direction: column;
background-color: #FFFFFF;
}
.card-img {
width: 710upx;
height: 1065upx;
}
.card-num {
color: #FFFFFF;
font-size: 26upx;
text-align: center;
}
.card-num-view {
background-color: #FF80AB;
height: 30upx;
line-height: 30upx;
padding: 0 10upx;
justify-content: center;
border-radius: 30upx;
position: absolute;
top: 20upx;
right: 20upx;
}
.card-bottm {
justify-content: center;
align-items: center;
}
.card-share-view {
justify-content: center;
align-items: center;
padding: 14upx 0;
color: #FF80AB;
margin: 20upx 20upx 20upx;
font-size: 30upx;
font-family: texticons;
}
.card-share-view:before {
content: '\e62d';
}
.car-title-view {
flex: 1;
padding: 14upx 0upx 14upx 20upx;
}
.card-title {
flex: 1;
font-size: 30upx;
text-align: left;
color: #555555;
text-overflow: ellipsis;
lines: 2;
display: -webkit-box;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/*双列表*/
.card-list2 {
width: 345upx;
margin: 20upx 0 20upx 20upx;
}
.card-list2-img {
width: 345upx;
height: 517upx;
}
.card-list2-num-view {
height: 27upx;
border-radius: 27upx;
}
.card-list2-num {
font-size: 22upx;
}
.card-list2-title {
font-size: 26upx;
}
.loadMore {
font-size: 30upx;
color: #555;
margin-bottom: 20upx;
}
/* 分类页面 */
.tags {
background: #fff;
flex: 1;
width: 710upx;
margin: 20upx;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.tag {
display: block;
width: 177.5upx;
height: 180upx;
padding: 24upx;
box-sizing: border-box;
text-align: center;
}
.tag-img {
border-radius: 60upx;
width: 120upx;
height: 120upx;
}
.tag-text {
font-size: 28upx;
color: #555555;
}
/* 个人中心 */
.center {
flex-direction: column;
}
.logo {
width: 750upx;
height: 240upx;
padding: 20upx;
box-sizing: border-box;
background-color: #FF80AB;
flex-direction: row;
align-items: center;
}
.logo-hover {
opacity: 0.8;
}
.logo-img {
width: 150upx;
height: 150upx;
border-radius: 150upx;
}
.logo-title {
height: 150upx;
flex: 1;
align-items: center;
justify-content: space-between;
flex-direction: row;
margin-left: 20upx;
}
.uer-name {
height: 60upx;
line-height: 60upx;
font-size: 38upx;
color: #FFFFFF;
}
.go-login.navigat-arrow {
font-size: 38upx;
color: #FFFFFF;
}
.login-title {
height: 150upx;
align-items: self-start;
justify-content: center;
flex-direction: column;
margin-left: 20upx;
}
.center-list {
background-color: #FFFFFF;
margin-top: 20upx;
width: 750upx;
flex-direction: column;
}
.center-list-item {
height: 90upx;
width: 750upx;
box-sizing: border-box;
flex-direction: row;
padding: 0upx 20upx;
}
.border-bottom {
border-bottom-width: 1upx;
border-color: #c8c7cc;
border-bottom-style: solid;
}
.list-icon {
width: 40upx;
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #FF80AB;
text-align: center;
font-family: texticons;
margin-right: 20upx;
}
.list-text {
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
flex: 1;
text-align: left;
}
.navigat-arrow {
height: 90upx;
width: 40upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
text-align: right;
font-family: texticons;
}
/* 登录 */
.loginView {
display: flex;
flex: 1;
flex-direction: column;
width: 750upx;
padding-top: 30upx;
}
.input-view {
border-bottom-style: solid;
border-bottom-width: 3upx;
border-bottom-color: #ddd;
background-color: #fff;
flex-direction: row;
width: 750upx;
padding: 20upx 20upx;
box-sizing: border-box;
}
.label-view {
width: 100upx;
height: 60upx;
align-items: center;
margin-right: 30upx;
}
.label {
flex: 1;
line-height: 60upx;
font-size: 38upx;
color: #555;
text-align: left;
}
.input {
flex: 1;
height: 60upx;
font-size: 38upx;
align-items: center;
}
.button-view {
width: 750upx;
margin-top: 50upx;
padding: 0 20upx;
box-sizing: border-box;
flex-direction: column;
}
button {
width: 710upx;
height: 80upx;
line-height: 80upx;
text-align: center;
font-size: 38upx;
}
button.login {
background-color: #FF80AB;
color: #fff;
}
button.register {
margin-top: 30upx;
color: #FF80AB;
background-color: #fff;
border-color: #FF80AB;
border-width: 2upx;
}
.register.hover,
.login.hover {
opacity: 0.6;
}
/* 详情页面 */
.detail-btn-view {
width: 750upx;
position: fixed;
bottom: 75upx;
font-size: 28upx;
justify-content: space-between;
}
.detail-btn-view view {
opacity: 0.75;
height: 80upx;
border-radius: 80upx;
width: 80upx;
justify-content: center;
align-items: center;
line-height: 80upx;
margin: 0 30upx;
font-family: texticons;
background: #eee;
color: #555;
}
.detail-btn-view view text{
margin-left: 10upx;
}
.detail-btn-view .download:before {
content: '\e617';
}
.detail-btn-view .collect:before {
content: '\e68d';
}
.detail-btn-view .setting {
flex: 1;
}
examples/image-template/main.js 已删除 100644 → 0
浏览文件 @ 8f7e5961
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
\ No newline at end of file
examples/image-template/manifest.json 已删除 100644 → 0
浏览文件 @ 8f7e5961
{
"name" : "image",
"appid" : "__UNI__D5C0215",
"description" : "图片App模版",
"transformPx" : false,
"icons" : [
{
"sizes" : "分辨率，192x192",
"src" : "图片路径"
}
],
"versionName" : "1.0.0",
"versionCode" : 100,
"app-plus" : {},
// 5+App特有相关
"quickapp" : {},
// 快应用特有相关
"mp-weixin" : {}
}
// 小程序特有相关
examples/image-template/pages.json 已删除 100644 → 0
浏览文件 @ 8f7e5961
{
"pages": [{//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
"path": "pages/new/new",
"style": {
"navigationBarTitleText": "最新",
"enablePullDownRefresh": true
}
}, {
"path": "pages/hot/hot",
"style": {
"navigationBarTitleText": "最热",
"enablePullDownRefresh": true
}
}, {
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情",
"navigationBarBackgroundColor": "#000000",
"app-plus":{
"bounce":"none",
"titleNView":{
"buttons":[{
"fontSrc":"/static/icon.ttf",
"fontSize":"24px",
"text":"\ue602"
}]
}
}
}
}, {
"path": "pages/tag/tag",
"style": {
"navigationBarTitleText": "分类"
}
}, {
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "专题",
"enablePullDownRefresh": true
}
}, {
"path": "pages/center/center",
"style": {
"navigationBarTitleText": "个人中心"
}
}, {
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录"
}
}],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "妹子图",
"navigationBarBackgroundColor": "#FF80AB",
"backgroundColor": "#fbf9fe"
},
"tabBar": {
"color": "#444444",
"selectedColor": "#FF80AB",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/new/new",
"iconPath": "static/index-0.png",
"selectedIconPath": "static/index-1.png",
"text": "最新"
}, {
"pagePath": "pages/hot/hot",
"iconPath": "static/hot-0.png",
"selectedIconPath": "static/hot-1.png",
"text": "推荐"
}, {
"pagePath": "pages/tag/tag",
"iconPath": "static/tag-0.png",
"selectedIconPath": "static/tag-1.png",
"text": "分类"
}, {
"pagePath": "pages/center/center",
"iconPath": "static/center-0.png",
"selectedIconPath": "static/center-1.png",
"text": "我的"
}]
}
}
examples/image-template/pages/center/center.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<template>
<view class="center">
<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
<image class="logo-img" :src="login ? uerInfo.avatarUrl :avatarUrl"></image>
<view class="logo-title">
<text class="uer-name">Hi，{{login ? uerInfo.name : '您未登录'}}</text>
<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
</view>
</view>
<view class="center-list">
<view class="center-list-item border-bottom">
<text class="list-icon">&#xe60c;</text>
<text class="list-text">收藏图片</text>
<text class="navigat-arrow">&#xe65e;</text>
</view>
<view class="center-list-item">
<text class="list-icon">&#xe60d;</text>
<text class="list-text">收藏图集</text>
<text class="navigat-arrow">&#xe65e;</text>
</view>
</view>
<view class="center-list">
<view class="center-list-item border-bottom">
<text class="list-icon">&#xe60b;</text>
<text class="list-text">管理图片</text>
<text class="navigat-arrow">&#xe65e;</text>
</view>
<view class="center-list-item">
<text class="list-icon">&#xe61a;</text>
<text class="list-text">上传图片</text>
<text class="navigat-arrow">&#xe65e;</text>
</view>
</view>
<view class="center-list">
<view class="center-list-item">
<text class="list-icon">&#xe609;</text>
<text class="list-text">帐号管理</text>
<text class="navigat-arrow">&#xe65e;</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
login:false,
avatarUrl:"../../static/logo.png",
uerInfo:{}
}
},
methods: {
goLogin() {
if(!this.login){
uni.navigateTo({
url:"../login/login"
})
}
}
}
}
</script>
<style>
</style>
examples/image-template/pages/detail/detail.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<template>
<view class="index">
<swiper @change="swpierChange" :style="{height:screenHeight + 'px'}">
<swiper-item v-for="(value,index) in data" :key="index" @click="preImg(index)">
<image :src="value" mode="widthFix"></image>
</swiper-item>
</swiper>
<view class="detail-btn-view">
<view class="download" @click="download"></view>
<!-- #ifdef APP-PLUS -->
<view v-if="showBtn" class="setting" @click="setting">设为壁纸</view>
<!-- #endif -->
<view class="collect" @click="collect"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgShow: false,
index: 0,
showBtn: false,
screenHeight: 0,
imgLength: 0,
providerList: [],
data: [],
detailDec:""
}
},
onLoad(e) {
// #ifdef APP-PLUS
if (plus.os.name === 'Android') {
this.showBtn = true;
}
// #endif
this.screenHeight = uni.getSystemInfoSync().windowHeight;
console.log(e.data);
this.detailDec = e.data;
let data = JSON.parse(e.data);
this.imgLength = data.img_num;
this.data.push(data.img_src);
this.getData(data.id);
uni.setNavigationBarTitle({
title: "1/" + this.imgLength
});
// 获取分享通道
uni.getProvider({
service: "share",
success: (e) => {
let data = []
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '分享到微信好友',
id: 'weixin'
})
data.push({
name: '分享到微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline'
})
break;
case 'qq':
data.push({
name: '分享到QQ',
id: 'qq'
})
break;
default:
break;
}
}
this.providerList = data;
},
fail: (e) => {
console.log("获取登录通道失败", e);
}
});
},
onShareAppMessage() {
return {
title: "欢迎使用uni-app看图模板",
path: '/pages/detail/detail?data=' + this.detailDec,
imageUrl:this.data[this.index]
}
},
onNavigationBarButtonTap(e) {
if (this.providerList.length === 0) {
uni.showModal({
title: "当前环境无分享渠道!",
showCancel: false
})
return;
}
let itemList = this.providerList.map(function (value) {
return value.name
})
uni.showActionSheet({
itemList: itemList,
success: (res) => {
uni.share({
provider: this.providerList[res.tapIndex].id,
scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ?
'WXSenceTimeline' : "WXSceneSession",
type: 0,
title: "uni-app模版",
summary: "欢迎使用uni-app模版",
imageUrl: this.data[this.index],
href: "https://uniapp.dcloud.io",
success: (res) => {
console.log("success:" + JSON.stringify(res));
},
fail: (e) => {
uni.showModal({
content: e.errMsg,
showCancel: false
})
}
});
}
})
},
methods: {
download() {
uni.downloadFile({
url: this.data[this.index],
success: (e) => {
console.log(e);
uni.saveImageToPhotosAlbum({
filePath: e.tempFilePath,
success: () => {
uni.showToast({
icon: "none",
title: "已保存到手机相册"
})
},
fail: () => {
uni.showToast({
icon: "none",
title: "保存到手机相册失败"
})
}
});
},
fail: (e) => {
uni.showModal({
content: "下载失败，" + e.errMsg,
showCancel: false
})
}
})
},
collect() {
uni.showToast({
icon: "none",
title: "点击收藏按钮"
})
},
//#ifdef APP-PLUS
setting() {
uni.showToast({
icon: "none",
title: "正在设为壁纸"
})
setTimeout(() => {
var WallpaperManager = plus.android.importClass("android.app.WallpaperManager");
var Main = plus.android.runtimeMainActivity();
var wallpaperManager = WallpaperManager.getInstance(Main);
plus.android.importClass(wallpaperManager);
var BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");
uni.downloadFile({
url: this.data[this.index],
success: (e) => {
var filePath = e.tempFilePath.replace("file://", "");
var bitmap = BitmapFactory.decodeFile(filePath);
try {
wallpaperManager.setBitmap(bitmap);
uni.showToast({
icon: "none",
title: "壁纸设置成功"
})
} catch (e) {
uni.showToast({
icon: "none",
title: "壁纸设置失败"
})
}
},
fail: () => {
uni.showToast({
icon: "none",
title: "壁纸设置失败"
})
}
})
}, 100)
},
//#endif
swpierChange(e) {
this.index = e.detail.current;
uni.setNavigationBarTitle({
title: e.detail.current + 1 + "/" + this.imgLength
})
},
preImg(index) {
if (this.imgShow) { //防止点击过快导致重复调用
return;
}
this.imgShow = true;
setTimeout(() => {
this.imgShow = false;
}, 1000)
setTimeout(() => {
uni.previewImage({
current: this.data[index],
urls: this.data
})
}, 150)
},
getData(e) {
uni.request({
url: "https://uniapp.dcloud.io/tuku/detail.php?id=" + e,
success: (res) => {
if (res.data.code !== 0) {
uni.showModal({
content: "请求失败，失败原因：" + res.data.msg,
showCancel: false
})
return;
}
this.data = this.data.concat(res.data.data);
},
fail: () => {
uni.showModal({
content: "请求失败，请重试!",
showCancel: false
})
}
})
}
}
}
</script>
<style>
page {
background-color: #000;
}
swiper {
flex: 1;
width: 750upx;
background-color: #000;
display: flex;
flex-direction: column;
}
swiper-item {
display: flex;
align-items: center;
}
image {
width: 750upx;
height: 1125upx;
}
</style>
examples/image-template/pages/hot/hot.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<template>
<view class="index">
<block v-for="(list, index) in lists" :key="index">
<view class="row">
<view class="card card-list2" v-for="(item,key) in list" @click="goDetail(item)" :key="key">
<image class="card-img card-list2-img" :src="item.img_src"></image>
<view class="card-num-view card-list2-num-view">
<text class="card-num card-list2-num">{{item.img_num}}P</text>
</view>
<view class="card-bottm row">
<view class="car-title-view row">
<text class="card-title card-list2-title">{{item.title}}</text>
</view>
<view @click.stop="share(item)" class="card-share-view"></view>
</view>
</view>
</view>
</block>
<text class="loadMore">加载中...</text>
</view>
</template>
<script>
export default {
data() {
return {
refreshing: false,
lists: [],
fetchPageNum: 1
}
},
onLoad() {
this.getData();
uni.getProvider({
service: "share",
success: (e) => {
let data = [];
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '分享到微信好友',
id: 'weixin'
})
data.push({
name: '分享到微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline'
})
break;
case 'qq':
data.push({
name: '分享到QQ',
id: 'qq'
})
break;
default:
break;
}
}
this.providerList = data;
},
fail: (e) => {
console.log("获取登录通道失败", e);
}
});
},
onPullDownRefresh() {
console.log("下拉刷新");
this.refreshing = true;
this.getData();
},
onReachBottom() {
this.getData();
},
methods: {
getData() {
uni.request({
url: 'https://uniapp.dcloud.io/tuku/posts.php?page=' + (this.refreshing ? 1 : this.fetchPageNum) + '&per_page=10',
success: (ret) => {
if (ret.statusCode !== 200) {
console.log("请求失败:", ret)
} else {
if (this.refreshing && ret.data[0].id === this.lists[0][0].id) {
uni.showToast({
title: "已经最新",
icon: "none",
})
this.refreshing = false;
uni.stopPullDownRefresh()
return;
}
let list = [],
lists = [],
data = ret.data;
for (let i = 0, length = data.length; i < length; i++) {
let index = Math.floor(i / 2);
list.push(data[i]);
if (i % 2 == 1) {
lists.push(list);
list = [];
}
}
console.log("得到lists", lists);
if (this.refreshing) {
this.refreshing = false;
uni.stopPullDownRefresh()
this.lists = lists;
this.fetchPageNum = 2;
} else {
this.lists = this.lists.concat(lists);
this.fetchPageNum += 1;
}
}
}
});
},
goDetail(e) {
uni.navigateTo({
url:"../detail/detail?data=" + JSON.stringify(e)
})
},
share(e) {
if (this.providerList.length === 0) {
uni.showModal({
title: "当前环境无分享渠道!",
showCancel: false
})
return;
}
let itemList = this.providerList.map(function (value) {
return value.name
})
uni.showActionSheet({
itemList: itemList,
success: (res) => {
uni.share({
provider: this.providerList[res.tapIndex].id,
scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
type: 0,
title:"uni-app模版",
summary: e.title,
imageUrl:e.img_src,
href:"https://uniapp.dcloud.io",
success: (res) => {
console.log("success:" + JSON.stringify(res));
},
fail: (e) => {
uni.showModal({
content: e.errMsg,
showCancel:false
})
}
});
}
})
}
}
}
</script>
<style>
</style>
examples/image-template/pages/list/list.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<template>
<view class="index">
<block v-for="(list, index) in lists" :key="index">
<view class="row">
<view class="card card-list2" v-for="(item,key) in list" @click="goDetail(item)" :key="key">
<image class="card-img card-list2-img" :src="item.img_src"></image>
<view class="card-num-view card-list2-num-view">
<text class="card-num card-list2-num">{{item.img_num}}P</text>
</view>
<view class="card-bottm row">
<view class="car-title-view row">
<text class="card-title card-list2-title">{{item.title}}</text>
</view>
<view @click.stop="share(item)" class="card-share-view"></view>
</view>
</view>
</view>
</block>
<text class="loadMore">{{loadMoreText}}</text>
</view>
</template>
<script>
export default {
data() {
return {
refreshing: false,
loadMoreText:"加载中...",
lists: [],
id: 0,
fetchPageNum: 0
}
},
onLoad(e) {
uni.setNavigationBarTitle({
title: "专题：" + e.type
})
this.id = e.id;
setTimeout(() => { //防止app里由于渲染导致转场动画卡顿
this.getData();
}, 300)
uni.getProvider({
service: "share",
success: (e) => {
let data = [];
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '分享到微信好友',
id: 'weixin'
})
data.push({
name: '分享到微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline'
})
break;
case 'qq':
data.push({
name: '分享到QQ',
id: 'qq'
})
break;
default:
break;
}
}
this.providerList = data;
},
fail: (e) => {
console.log("获取登录通道失败", e);
}
});
},
onPullDownRefresh() {
console.log("下拉刷新");
this.refreshing = true;
this.getData();
},
onReachBottom() {
console.log("上拉加载刷新");
if(this.fetchPageNum > 4){
this.loadMoreText = "没有更多了"
return;
}
this.getData();
},
methods: {
getData(e) {
uni.request({
url: 'https://uniapp.dcloud.io/tuku/list.php?type=' + this.id,
success: (ret) => {
if (ret.statusCode !== 200) {
console.log("请求失败", ret)
} else {
if (this.refreshing && ret.data.data[0].id === this.lists[0][0].id) {
uni.showToast({
title: "已经最新",
icon: "none",
})
this.refreshing = false;
uni.stopPullDownRefresh()
return;
}
let list = [],
lists = [],
data = ret.data.data;
for (let i = 0, length = data.length; i < length; i++) {
let index = Math.floor(i / 2);
list.push(data[i]);
if (i % 2 == 1) {
lists.push(list);
list = [];
}
}
console.log("list页面得到lists", lists);
if (this.refreshing) {
this.refreshing = false;
uni.stopPullDownRefresh()
this.lists = lists;
this.fetchPageNum = 2;
} else {
this.lists = this.lists.concat(lists);
this.fetchPageNum += 1;
}
this.fetchPageNum += 1;
}
}
});
},
goDetail(e) {
uni.navigateTo({
url: "../detail/detail?data=" + JSON.stringify(e)
})
},
share(e) {
if (this.providerList.length === 0) {
uni.showModal({
title: "当前环境无分享渠道!",
showCancel: false
})
return;
}
let itemList = this.providerList.map(function (value) {
return value.name
})
uni.showActionSheet({
itemList: itemList,
success: (res) => {
uni.share({
provider: this.providerList[res.tapIndex].id,
scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ?
'WXSenceTimeline' : "WXSceneSession",
type: 0,
title: "uni-app模版",
summary: e.title,
imageUrl: e.img_src,
href: "https://uniapp.dcloud.io",
success: (res) => {
console.log("success:" + JSON.stringify(res));
},
fail: (e) => {
uni.showModal({
content: e.errMsg,
showCancel: false
})
}
});
}
})
}
}
}
</script>
<style>
</style>
examples/image-template/pages/login/login.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<template>
<form class='loginView' @submit="login">
<view class="input-view">
<view class="label-view">
<text class="label">账号 </text>
</view>
<input class="input" type="text" placeholder="请输入用户名" name="nameValue" />
</view>
<view class="input-view">
<view class="label-view">
<text class="label">密码</text>
</view>
<input class="input" type="password" placeholder="请输入密码" name="passwordValue" />
</view>
<view class="button-view">
<button type="default" class="login" hover-class="hover" formType="submit">登录</button>
<button type="default" class="register" hover-class="hover" @click="register">免费注册</button>
</view>
</form>
</template>
<script>
export default {
data: {
},
methods: {
login(e) {
console.log("得到账号:"+ e.detail.value.nameValue + ';得到密码:' + e.detail.value.passwordValue)
},
register() {
console.log("前往注册页面")
}
}
}
</script>
<style>
</style>
examples/image-template/pages/new/new.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<template>
<view class="index">
<block v-for="(item, index) in list" :key="index">
<view class="card" @click="goDetail(item)">
<image class="card-img" :src="item.img_src" mode="aspectFill"></image>
<view class="card-num-view">
<text class="card-num">{{item.img_num}}P</text>
</view>
<view class="card-bottm row">
<view class="car-title-view row">
<text class="card-title">{{item.title}}</text>
</view>
<view @click.stop="share(item)" class="card-share-view"></view>
</view>
</view>
</block>
<text class="loadMore">加载中...</text>
</view>
</template>
<script>
export default {
data() {
return {
refreshing: false,
providerList: [],
list: [],
fetchPageNum: 1
}
},
onLoad() {
this.getData();
uni.getProvider({
service: "share",
success: (e) => {
let data = []
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '分享到微信好友',
id: 'weixin'
})
data.push({
name: '分享到微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline'
})
break;
case 'qq':
data.push({
name: '分享到QQ',
id: 'qq'
})
break;
default:
break;
}
}
this.providerList = data;
},
fail: (e) => {
console.log("获取登录通道失败", e);
}
});
},
onReachBottom() {
this.getData();
},
onPullDownRefresh() {
console.log("下拉刷新");
this.refreshing = true;
this.getData();
},
methods: {
getData() {
uni.request({
url: 'https://uniapp.dcloud.io/tuku/posts.php?page=' + (this.refreshing ? 1 : this.fetchPageNum) + '&per_page=5',
success: (ret) => {
console.log("data",ret);
if (ret.statusCode !== 200) {
console.log("失败!");
} else {
if (this.refreshing && ret.data[0].id === this.list[0].id) {
uni.showToast({
title: "已经最新",
icon: "none",
})
this.refreshing = false;
uni.stopPullDownRefresh();
return;
}
if (this.refreshing) {
this.refreshing = false;
uni.stopPullDownRefresh()
this.list = ret.data;
this.fetchPageNum = 2;
} else {
this.list = this.list.concat(ret.data);
this.fetchPageNum += 1;
}
}
}
});
},
goDetail(e) {
uni.navigateTo({
url:"../detail/detail?data=" + JSON.stringify(e)
})
},
share(e) {
if (this.providerList.length === 0) {
uni.showModal({
title: "当前环境无分享渠道!",
showCancel: false
})
return;
}
let itemList = this.providerList.map(function (value) {
return value.name
})
uni.showActionSheet({
itemList: itemList,
success: (res) => {
uni.share({
provider: this.providerList[res.tapIndex].id,
scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
type: 0,
title:"uni-app模版",
summary: e.title,
imageUrl:e.img_src,
href:"https://uniapp.dcloud.io",
success: (res) => {
console.log("success:" + JSON.stringify(res));
},
fail: (e) => {
uni.showModal({
content: e.errMsg,
showCancel:false
})
}
});
}
})
}
}
}
</script>
<style>
</style>
examples/image-template/pages/tag/tag.vue 已删除 100644 → 0
浏览文件 @ 8f7e5961
<template>
<view class="index">
<view class="tags">
<bclok v-for="(value, index) in data" :key="index">
<view class="tag" @tap="goList(value)">
<image class="tag-img" :src="value.icon"></image>
<text class="tag-text">{{value.type}}</text>
</view>
</bclok>
</view>
</view>
</template>
<script>
export default {
data() {
return {
data: [
{
type: '动物',
id: 1,
icon: 'http://placehold.it/150x150'
},
{
type: '风景',
id: 2,
icon: 'http://placehold.it/150x150'
},
{
type: '建筑',
id: 3,
icon: 'http://placehold.it/150x150'
},
{
type: '美女',
id: 4,
icon: 'http://placehold.it/150x150'
},
{
type: '汽车',
id: 5,
icon: 'http://placehold.it/150x150'
},
{
type: '运动',
id: 6,
icon: 'http://placehold.it/150x150'
},
{
type: '动物',
id: 1,
icon: 'http://placehold.it/150x150'
},
{
type: '风景',
id: 2,
icon: 'http://placehold.it/150x150'
}
]
}
},
methods: {
goList(value) {
uni.navigateTo({
url:'../list/list?type=' + value.type + '&id=' + value.id
})
}
}
}
</script>
<style>
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或