公告列表
公告列表
收藏
回答

微信小程序可以做仿电子书的翻页特效吗？

最近做个项目需要模仿电子书的翻页效果，我查看了好多阅读类的小程序都没有做这样的效果，找到了个翻页特效的插件turn.js但都是用jquery写的，小程序不支持用jquery啊，就为了做这么个特效难道要我把插件全部翻页成js？我内心是拒绝的啊，有没有大神能帮忙支招啊，谢谢

回答关注问题邀请回答
收藏

5 个回答

  • Answer
    Answer
    2020-12-08

    翻页做出来了 就是动画还不行

    2020-12-08
    有用
    回复
  • 光芒
    光芒
    2020-12-02

    2020-12-2 这问题解决了吗

    2020-12-02
    有用
    回复
  • ITお姫様
    ITお姫様
    2020-09-08

    问下作者写出来了吗？求指教……

    2020-09-08
    有用
    回复 1
    • 青睐
      青睐
      2020-09-08
      我最近也在写，好难啊
      2020-09-08
      赞
      回复
  • 是橙子不是柠檬
    是橙子不是柠檬
    2019-07-23

    问下作者写出来了吗？？怎么实现的？正发愁，想提问，发现三月就有人问了~~

    2019-07-23
    有用
    回复
  • TNT
    TNT
    2019-03-11

    可以尝试使用 css3 进行操作

    wxml

    <view class="book preserve-3d">
       <view class="now_page point">
           <view class="book-page">
              <text>第三页</text>
           </view>
       </view>
     
       <view class="now_page point">
           <viewv class="book-page">
              <text>第二页</text>
           </view>
       </view>
     
       <view class="now_page point">
           <view class="book-page ">
              <text>第一页</text>
           </view>
       </view>
     
     <!--封面-->
       <view class="point now_page">
            <view class="book-page first-page">
               <text>封面</text>
            </view>
       </view>
    </view>


    2019-03-11
    有用
    回复 4
    • TNT
      TNT
      2019-03-11
      book{
              height: 10rem;
              width: 40%;
              background: #FFF;
              position: absolute;
              right:10%;
              top:400rpx;
              transform: rotateX(30deg);
          }
          /*每页的公共样式*/
          .book-page {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height:1000rpx;
              border: 1px solid #1976D2;
              text-align: center;
              background-color: #fff;
          }
          .book-page p{
              font-size: 120rpx;
              margin-top: 200rpx;
              color: #ff6300;
              backface-visibility:hidden;
          }
          /*首页样式*/
          .first-page{
              background-color: #1976D2;
          }
           
          /*动画部分*/
          /*I'm the home page动画*/
          .flip-animation-start {
              animation: flipBook1 3s forwards;
          }
          .flip-animation-end {
              animation: flipBook2 3s forwards;
          }
          @keyframes flipBook1 {
              0% {
                  transform: rotateY(0deg);
              }
              100% {
                  transform: rotateY(-160deg);
              }
          }
          /*关闭书页*/
          @keyframes flipBook2 {
              0% {
                  transform: rotateY(-160deg);
              }
              100% {
                  transform: rotateY(0deg);
              }
          }


      2019-03-11
      赞
      回复
    • 静享华年🤪
      静享华年🤪
      2019-03-11回复TNT

      谢谢，我试试，3Q，么么哒

      2019-03-11
      赞
      回复
    • 果果
      果果
      2020-01-02回复静享华年🤪
      弱弱的问下，实现了吗？求指教
      2020-01-02
      赞
      回复
    • 静享华年🤪
      静享华年🤪
      2020-12-05回复果果
      我最后退而求其次没做出翻页的特效，只做成了类似轮播图的效果
      2020-12-05
      赞
      回复
请 登录 后发表内容
相关问题
相关文档