微信小程序图文混合动态显示

实现思路

1. 首先想好怎么存储这些图文，我最开始想的比较简单，就是一个数组，全是字符串，如果是文字，那就是单纯的文字，如果是图片，那么就放图片的链接
2. 在上面思路的情况下，思考怎么在wxml上渲染出来——好像还不好处理。就比如用 wx:if 和 wx:else，也不好动态的判断哪个是文字，哪个是图片

<!-- items是这个数组，item.xxx表示一定的条件判断语句 -->
<view wx:for="{{items}}" wx:key="*this">
	<view wx:if="{{item.xxx}}"></view>
	<image wx:else></image>
</view>

3. 所以最后想出来可以让数组里面的元素是对象，每一个对象包含两个元素，其中一个表示类型，分别可以是文本和图片，另外一个是内容，分别存储文本信息和图片链接，如下：

// 这里的txt代表文本，pic代表图片
items: [
      {
        type: 'txt',
        content: '这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一'
      },
      {
        type: 'pic',
        content: '../../../pics/bas.jpg'
      }
      ]

4. 对应的，wxml可以这样写：

<view wx:for="{{items}}" wx:key="*this">
   <view wx:if="{{item.type=='txt'}}">{{item.content}}</view>
   <image wx:else src="{{item.content}}"></image>
</view>

wxml内容

<view class="course-main">
   <view wx:for="{{mainContent}}" wx:key="*this">
     <view wx:if="{{item.type=='txt'}}">{{item.content}}</view>
     <image wx:else src="{{item.content}}"></image>
   </view>
</view>

js内容

Page({
  data: {
    mainContent: [
      {
        type: 'txt',
        content: '这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一'
      },
      {
        type: 'pic',
        content: '../../../pics/bas.jpg'
      },
      {
        type: 'txt',
        content: '这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一,这里是段落一'
      },
      {
        type: 'pic',
        content: '../../../pics/bas.jpg'
      }
    ]
  },
})

wxss内容

.course-main {
  width: 100%;
  padding: 10rpx 0;
  background-color: #eee;
  box-shadow: 0 0 4rpx 4rpx #aaa;
}

实现效果截图

显示效果

调试器wxml