收藏
回答

如何实现点击小程序,进入到小程序之后内容横向展示?

如何实现点击小程序,进入到小程序之后内容横向展示?

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

2 个回答

  • CRMEB
    CRMEB
    2023-10-21

    要实现点击小程序进入到小程序之后内容横向展示,可以通过以下步骤实现:


    1. 在小程序的`app.json`文件中,设置页面的初始样式为横向滚动。例如:


    {
      "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "style": "v2",
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      }
    }
    


    2. 在需要横向展示的页面的`index.wxml`文件中,使用`<scroll-view>`组件包裹需要横向滚动的内容。例如:


    <scroll-view scroll-x="true">
      <view class="content">这里是横向展示的内容</view>
    </scroll-view>
    


    3. 在需要横向展示的页面的`index.wxss`文件中,设置内容的样式。例如:


    .content {
      display: flex;
      flex-direction: row;
    }
    


    通过以上步骤,当用户点击进入小程序后,内容将横向展示。

    2023-10-21
    有用
    回复 1
    • 。。
      。。
      2023-10-21
      请问一下,我想要的效果是点击小程序,进入到小程序后,页面的内容直接是横屏展示的 ,就比如是只要点击小程序,所有的内容都是横屏的,就是手机横着看的那种效果
      2023-10-21
      回复
  • Lanmou
    Lanmou
    2023-10-21

    页面json 添加: "pageOrientation": "landscape"

    2023-10-21
    有用
    回复 2
    • 。。
      。。
      2023-10-21
      请问一下,
      这个可以预览效果嘛
      2023-10-21
      回复
    • Lanmou
      Lanmou
      2023-10-22回复。。
      在开发者工具里,预览、真机预览就能看效果啊
      2023-10-22
      回复
登录 后发表内容