小程序实现书籍翻页效果

_Jester

已于 2023-06-06 15:13:33 修改

阅读量1.6w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：数学建模

于 2019-06-12 18:26:04 首次发布

本文链接：https://blog.csdn.net/qq_41049816/article/details/91490730

做的小程序中突然加了一个相册，要求相册可以点击实现翻页，web能实现这种翻页效果的插件有很多，如turn.js，类似这种插件基本都是基于jQuery的，但是小程序是不支持jQ的。参考了网上大佬的代码，实现了一个最简单的翻页效果

基本结构：

<view class='container'>
    <view class='page_first'>家谱相册，点击图片翻页查看</view>
    <view class='page_last'>
        <block wx:for='{
  {imgArr}}' wx:key='{
  {index}}'>
            <view class="photo_item {
  {item.isturn?'left':'right'}} {
  {'zindex'+item.zIndex}}" data-index='{
  {index}}' bindtap='change' bindtransitionend='finish'>
                <image src='{
  {item.src}}' mode='aspectFill'></image>
            </view>
        </block>
    </view>
</view>

样式：

.container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page_first,.page_last{
    width: 50%;
    height: 480rpx;
}
.page_first{
    display:flex;
    align-item:center;
    box-sizing:border-box;
    padding:0 20rpx;
    text-align:center;
}
.page_last{
    po