You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
3.9 KiB
156 lines
3.9 KiB
<template>
|
|
<view class="content">
|
|
<!-- 小程序环境使用web-view加载StPageFlip -->
|
|
<web-view
|
|
:src="webviewUrl"
|
|
@message="handleMessage"
|
|
class="webview-container"
|
|
></web-view>
|
|
|
|
<!-- 控制按钮
|
|
<view class="controls">
|
|
<button @click="prevPage" :disabled="currentPage <= 0" class="control-btn">上一页</button>
|
|
<text class="page-info">{{ currentPage + 1 }} / {{ totalPages }}</text>
|
|
<button @click="nextPage" :disabled="currentPage >= totalPages - 1" class="control-btn">下一页</button>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 当前页码
|
|
currentPage: 0,
|
|
// 总页数
|
|
totalPages: 6,
|
|
// webview URL - 需要部署到服务器或使用本地路径
|
|
webviewUrl: 'https://hfllll.github.io/My/', // 请替换为实际的服务器地址
|
|
// 本地测试可以使用: '/static/stpageflip.html'
|
|
};
|
|
},
|
|
methods: {
|
|
// 处理来自webview的消息
|
|
handleMessage(e) {
|
|
console.log('收到webview消息:', e.detail.data);
|
|
const data = e.detail.data[0]; // 小程序webview消息格式
|
|
|
|
if (data.type === 'pageFlip') {
|
|
this.currentPage = data.currentPage;
|
|
this.totalPages = data.totalPages;
|
|
} else if (data.type === 'stateChange') {
|
|
console.log('翻页状态变化:', data.state);
|
|
if (data.state === 'flipping') {
|
|
uni.showToast({
|
|
title: '翻页中',
|
|
duration: 500,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// 上一页
|
|
prevPage() {
|
|
this.sendMessageToWebview({
|
|
type: 'prevPage'
|
|
});
|
|
},
|
|
|
|
// 下一页
|
|
nextPage() {
|
|
this.sendMessageToWebview({
|
|
type: 'nextPage'
|
|
});
|
|
},
|
|
|
|
// 跳转到指定页面
|
|
turnToPage(pageNumber) {
|
|
this.sendMessageToWebview({
|
|
type: 'turnToPage',
|
|
pageNumber: pageNumber
|
|
});
|
|
},
|
|
|
|
// 向webview发送消息
|
|
sendMessageToWebview(data) {
|
|
// 注意：小程序向webview发送消息需要特殊处理
|
|
// 这里只是示例，实际可能需要其他方式
|
|
console.log('向webview发送消息:', data);
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
console.log('StPageFlip翻页组件加载完成');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.webview-container {
|
|
width: 100%;
|
|
height: calc(100vh - 80px);
|
|
}
|
|
|
|
.controls {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 80px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30px;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.control-btn {
|
|
padding: 12px 24px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 25px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.control-btn:active {
|
|
transform: translateY(2px);
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.control-btn:disabled {
|
|
background: #bdc3c7;
|
|
color: #7f8c8d;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.page-info {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #2c3e50;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
</style>
|