微信小程序左侧导航栏和右侧详情怎样写

微信小程序左侧导航栏和右侧详情可以通过使用 `scroll-view` 组件和 `view` 组件来实现。具体实现方法如下：

1. 创建一个 `scroll-view` 组件，设置宽度和高度为 `100%`，并将 `scroll-x` 属性设置为 `true`，表示可以横向滚动。

2. 在 `scroll-view` 组件中创建一个 `view` 组件，用来存放左侧导航栏。

3. 在左侧导航栏中创建多个 `view` 组件，每个组件代表一个导航项，设置相应的样式和点击事件。

4. 在 `scroll-view` 组件下方创建一个 `view` 组件，用来存放右侧详情。

5. 根据需要，在右侧详情中创建相应的组件和样式，展示相应的内容。

6. 在左侧导航栏的点击事件中，根据点击的导航项，动态设置右侧详情的内容。

示例代码如下：

<scroll-view scroll-x="true" style="width: 100%; height: 100%;">
  <view style="display: flex; flex-direction: row;">
    <view wx:for="{{navList}}" wx:key="{{index}}" class="{{activeIndex == index ? 'active' : ''}}" bindtap="onNavTap" data-index="{{index}}">
      {{item}}
    </view>
  </view>
  <view style="padding: 10px;">
    <view wx:if="{{activeIndex == 0}}">这是第一个详情</view>
    <view wx:if="{{activeIndex == 1}}">这是第二个详情</view>
    <view wx:if="{{activeIndex == 2}}">这是第三个详情</view>
  </view>
</scroll-view>

其中，`navList` 是一个数组，用来存放左侧导航栏的内容；`activeIndex` 是一个变量，用来表示当前选中的导航项的下标；`onNavTap` 是导航项的点击事件，用来动态设置右侧详情的内容。